[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.

mmatusova_0-1683399412132.pngmmatusova_1-1683399433852.png

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! 😃