arcgis js api - How to implement esri javascript api 3.x with react js using the useEffect hook in TypeScript

Question

I have an application that needs to use React, esri-loader, TypeScript, the esri javascript api 3.x and I want to use the useEffect hook. unfortunately, I am a little rusty with esri, new to react, and the examples I have found do not use all the aspects of this problem. First I am getting an error that Parameter 'props' implicitly has an 'any' type. but I am also not sure I am implementing the map properly. any comments are welcome.

import React, { useEffect, useRef, Component } from "react";
import { observer } from "mobx-react";
import { loadModules } from "esri-loader";
import { EsriMapVM } from "./EsriMapVM";
import { setDefaultOptions } from "esri-loader";
import { render } from "react-dom";
// import EsriLoader from 'esri-loader-react';

// configure esri-loader to use version 3.35 from the ArcGIS CDN
// NOTE: make sure this is called once before any calls to loadModules()
setDefaultOptions({ version: "3.35" });

const EsriMap = (props) => {
    // create a view-model that will persist for the lifetime of the component
    const mapRef = useRef(null);

    useEffect(() => {
        // this will lazy load the ArcGIS API
        const apiUrl = "https://js.arcgis.com/3.35/";
        loadModules(["esri/map"])
            .then(([ArcGISMap]) => {
                // create map with the given options at a DOM node w/ id 'mapDiv'
                const map = new ArcGISMap("mapDiv", {
                    center: [-118, 34.5],
                    zoom: 8,
                    basemap: "dark-gray",
                });
                props.map(map);
            })
            .catch((err) => {
                // handle any script or module loading errors
                console.error(err);
            });
    });

    return (
        <div className="webmap" ref={mapRef}>
            
        </div>
    );
};

// render(<EsriMap id="e691172598f04ea8881cd2a4adaa45ba" />, document.querySelector("#root"));

export const Map = observer(EsriMap);

then I try to display it in the index.tsx

import React, { useRef } from "react";
import ReactDOM from "react-dom";

import { Button } from "cd-gras";
import { Map } from "cd-gras";
import { EsriMapVM } from "../../gras/src/components/EsriMap";
// import reportWebVitals from "./reportWebVitals";

const vm = useRef(new EsriMapVM()).current;

ReactDOM.render(
    <React.StrictMode>
        <Button />
// I've tried both of these id is not recognized
        <Map map={vm.setMap} />
        <Map id="mapDiv" />
    </React.StrictMode>,
    document.getElementById("root")
);

here is my vm

import { action, observable } from "mobx";
import { loadModules } from "esri-loader";

export class EsriMapVM {
    
    @observable map;
    
    @action.bound setMap(data) {
        this.map = data;
    }
    
}

question from:https://stackoverflow.com/questions/65904302/how-to-implement-esri-javascript-api-3-x-with-react-js-using-the-useeffect-hook

Answer 1

Waitting for answers