title: Mapbox in React without Class Components
body: <p>I am trying to use MapBox-GL with React. I am trying to avoid using a wrapper. </p>
  
  <p>I have sucessfully created the map using Class Components, but want to transform it to only using functions to take advantage of hooks. Displaying the map in a function works great: </p>
  
  <pre><code>const map = () =&gt; {
      new mapboxgl.Map({
      container: 'mapContainer',
      style: 'mapbox://styles/mapbox/light-v9',
      center: [7.32, 60.44],
      zoom: 6,
      })
  };
  const Map = () =&gt; {
      const style = {
          position: 'absolute',
          top: 0,
          bottom: 0,
          width: '100%',
          height: '100vh'
      };
      useEffect(()=&gt;{
          map();
  
      });
  
  
      return (
          &lt;Row type="flex" gutter="50"&gt;
              &lt;Col xs={{ span: 18 }}&gt;
                  &lt;div style={style} id="mapContainer" /&gt;
              &lt;/Col&gt;
          &lt;/Row&gt;
      );
  }
  </code></pre>
  
  <p>However, I want to add controllers and do things with the map. I do this normally in ComponentDidMount(). </p>
  
  <p>I have tried adding <code>map.addControl(geocoder);</code> for example to the useEffect, as well as outside the Map function. I am only getting errors: </p>
  
  <blockquote>
    <p>TypeError: map.addControl is not a function</p>
  </blockquote>