title: 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
body: <p>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.</p>
  <p>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.</p>
  <pre><code>import React, { useEffect, useRef, useState } from &quot;react&quot;;
  import { loadModules } from &quot;esri-loader&quot;;
  
  
  function Map() {
    
    const [featureLayer1, setFeatureLayer1] = useState(null);
    let view;
    const MapElement = useRef(null);
    useEffect(() =&gt; {
      loadModules(
        [
          &quot;esri/views/MapView&quot;,
          &quot;esri/Map&quot;,
          &quot;esri/config&quot;,
          &quot;esri/layers/GeoJSONLayer&quot;,
          &quot;esri/Graphic&quot;,
          &quot;esri/layers/GraphicsLayer&quot;,
          &quot;esri/layers/FeatureLayer&quot;, //latest
          &quot;esri/renderers/SimpleRenderer&quot;,
          &quot;esri/symbols/SimpleFillSymbol&quot;,
          &quot;esri/widgets/Legend&quot;,
        ],
        {
          css: true,
        }
      ).then(
        ([
          MapView,
          Map,
          esriConfig,
          Graphic,
          GraphicsLayer,
          FeatureLayer,
          SimpleRenderer,
          SimpleFillSymbol,
          Legend,
  
        ]) =&gt; {
          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 =
            &quot;MY_API_KEY&quot;;
  
          const map = new Map({
            basemap: &quot;arcgis-imagery&quot;, 
          });
  
          view = new MapView({
            map: map,
            center: [18.9660638, -33.8071444], 
            zoom: 13,
            container: MapElement.current,
          });
         
  
          view.ui.add(&quot;infoDiv&quot;, &quot;bottom-left&quot;);
         
          const graphicsLayer = new GraphicsLayer();
          graphicsLayer.opacity = 0.5;
          map.add(graphicsLayer);
  
        
          const streetLayer = new FeatureLayer({
            url: &quot;https://services5.arcgis.com/WPkXI1mQdYLzFttB/arcgis/rest/services/Navigation_Barriers/FeatureServer/0&quot;,
          });
          setFeatureLayer1(streetLayer);
          const erfLayer = new FeatureLayer({
            url: &quot;https://services5.arcgis.com/WPkXI1mQdYLzFttB/arcgis/rest/services/VdV_Cadastral/FeatureServer/0&quot;,
          });
  
          const valdevieLabels = {
            symbol: {
              type: &quot;text&quot;,
              color: &quot;#FFFFFF&quot;,
              haloColor: &quot;#5E8D74&quot;,
              haloSize: &quot;2px&quot;,
              font: {
                size: &quot;12px&quot;,
                family: &quot;Noto Sans&quot;,
                style: &quot;italic&quot;,
                weight: &quot;normal&quot;,
              },
            },
  
            labelPlacement: &quot;center-center&quot;,
            labelExpressionInfo: {
              expression: &quot;$feature.Label&quot;,
            },
          };
          const dotLyaer = new FeatureLayer({
            url: &quot;https://services5.arcgis.com/WPkXI1mQdYLzFttB/arcgis/rest/services/Greater_VdV_Addresses/FeatureServer/0&quot;,
     
            labelingInfo: [valdevieLabels],
          });
          dotLyaer.opacity = 0;
  
          let symbol = {
            type: &quot;simple-fill&quot;, 
            color: [51, 51, 204, 0.9],
            style: &quot;none&quot;,
            outline: {
              
              color: &quot;black&quot;,
              width: 1,
            },
          };
          const erfLayerRenderer = {
            type: &quot;simple&quot;,
            symbol: symbol,
          };
          erfLayer.renderer = erfLayerRenderer;
          map.add(streetLayer);
          map.add(dotLyaer);
          map.add(erfLayer);
        }
      );
    });
    return (
      &lt;&gt;
        &lt;div style={{ height: 800 }} ref={MapElement}&gt;
          {featureLayer1 !== null ? &quot;Not empty&quot; : &quot;Empty&quot;}
        &lt;/div&gt;
      &lt;/&gt;
    );
  }
  
  export default Map;
  </code></pre>
  <p>In my return Div I can see that the featureLayer1 is empty in the browser.</p>