Where to put my API KEY in my ARCGIS react project so that my FeatureLayer for which I need apikey will show. Only my map is showing

Question

I am using React to build my ArcGis application but I need to use my API key for one of the feature Layers. The Problem I am having is that my feature layer is not showing. I believe if I pass it down as a prop to my Map Component from my FeatureLayer then this might solve my problem but can I put my API key in my FeatureLayer component or does it have to be in the Map Layer component. I am quite new to react still and there might be some misunderstandings on how everything should fit together.

I got this to work in Html/Javascript and there it worked no problem but with React things might work a little differently. Any help would be greatly appreciated.

import React, { useEffect, useRef, useState } from "react";
import { loadModules } from "esri-loader";


function Map() {
  
  const [featureLayer1, setFeatureLayer1] = useState(null);
  let view;
  const MapElement = useRef(null);
  useEffect(() => {
    loadModules(
      [
        "esri/views/MapView",
        "esri/Map",
        "esri/config",
        "esri/layers/GeoJSONLayer",
        "esri/Graphic",
        "esri/layers/GraphicsLayer",
        "esri/layers/FeatureLayer", //latest
        "esri/renderers/SimpleRenderer",
        "esri/symbols/SimpleFillSymbol",
        "esri/widgets/Legend",
      ],
      {
        css: true,
      }
    ).then(
      ([
        MapView,
        Map,
        esriConfig,
        Graphic,
        GraphicsLayer,
        FeatureLayer,
        SimpleRenderer,
        SimpleFillSymbol,
        Legend,

      ]) => {
        const houseStatus = {
          Unreleased: [99, 97, 97], //dark grey

          Sold: [255, 0, 0], //red

          Available: [0, 255, 0], //green

          Other: [0, 0, 255], //blue
        };

        esriConfig.apiKey =
          "MY_API_KEY";

        const map = new Map({
          basemap: "arcgis-imagery", 
        });

        view = new MapView({
          map: map,
          center: [18.9660638, -33.8071444], 
          zoom: 13,
          container: MapElement.current,
        });
       

        view.ui.add("infoDiv", "bottom-left");
       
        const graphicsLayer = new GraphicsLayer();
        graphicsLayer.opacity = 0.5;
        map.add(graphicsLayer);

      
        const streetLayer = new FeatureLayer({
          url: "https://services5.arcgis.com/WPkXI1mQdYLzFttB/arcgis/rest/services/Navigation_Barriers/FeatureServer/0",
        });
        setFeatureLayer1(streetLayer);
        const erfLayer = new FeatureLayer({
          url: "https://services5.arcgis.com/WPkXI1mQdYLzFttB/arcgis/rest/services/VdV_Cadastral/FeatureServer/0",
        });

        const valdevieLabels = {
          symbol: {
            type: "text",
            color: "#FFFFFF",
            haloColor: "#5E8D74",
            haloSize: "2px",
            font: {
              size: "12px",
              family: "Noto Sans",
              style: "italic",
              weight: "normal",
            },
          },

          labelPlacement: "center-center",
          labelExpressionInfo: {
            expression: "$feature.Label",
          },
        };
        const dotLyaer = new FeatureLayer({
          url: "https://services5.arcgis.com/WPkXI1mQdYLzFttB/arcgis/rest/services/Greater_VdV_Addresses/FeatureServer/0",
   
          labelingInfo: [valdevieLabels],
        });
        dotLyaer.opacity = 0;

        let symbol = {
          type: "simple-fill", 
          color: [51, 51, 204, 0.9],
          style: "none",
          outline: {
            
            color: "black",
            width: 1,
          },
        };
        const erfLayerRenderer = {
          type: "simple",
          symbol: symbol,
        };
        erfLayer.renderer = erfLayerRenderer;
        map.add(streetLayer);
        map.add(dotLyaer);
        map.add(erfLayer);
      }
    );
  });
  return (
    <>
      <div style={{ height: 800 }} ref={MapElement}>
        {featureLayer1 !== null ? "Not empty" : "Empty"}
      </div>
    </>
  );
}

export default Map;

In my return Div I can see that the featureLayer1 is empty in the browser.

Answer 1

I was able to solve this by using @arcgis/core:

In App.jsx:

import esriConfig from "@arcgis/core/config";
esriConfig.assetsPath = "./assets";
esriConfig.apiKey = "<Your API KEY>"
function App() {...

Also, be sure to change the package.json file to

"script": {
    "start": "npm run copy && react-scripts start",
    "build": "npm run copy && react-scripts build",
    "copy": "ncp ./node_modules/@arcgis/core/assets ./public/assets"
  }

as indicated in the documentation at: https://developers.arcgis.com/javascript/latest/es-modules/. This will enable the map assets to be loaded and identified by React.