[esri.views.MapView] #container element with id 'viewDiv' not found

[mmatusova]

Hi, I decided to try out a tutorial using the JS SDK, using React, but I am having an issue mentioned in the title.
The app is a simple react app made using npx create-react-app my-app --template typescript.

https://developers.arcgis.com/javascript/latest/display-a-map/ The idea was to follow this tutorial.

I add the needed imports as so, which are: 

import Map from "@arcgis/core/Map";

import MapView from "@arcgis/core/views/MapView";

and then create a component called MapComponent, which just returns a div as such: 

<div id="viewDiv"></div>

but then I end up getting the error in the title. I read that you need to set the parent's height to workaround it, but to no avail.

The values and names are from the tutorial above.

But, if anyone has some handy tutorials for ArcGIS in React, I'd be happy to see them.

[RamaniGanason · Accepted solution]

Hi @mmatusova, I think the issue is that you are calling the js function before the div is rendered causing it not to find it. I think you can use useEffect hook for this.

export function MapComponent() {
    const loadMap = () => {
        const map = new Map({
            basemap: "arcgis-topographic"
        });

        const view = new MapView({
            map: map,
            container: "viewDiv"
        })
    }

    useEffect(() => {
        loadMap();
    }, []);

    return <div style={{ height: 100, width: 500 }} id='viewDiv'></div>
}

[mmatusova]

Hi @RamaniGanason ! 

I ended up figuring it out later on that day fortunately, but thank you so much for confirming this is the right way to do it! 😃