title: Leaflet: Map container not found
body: <p>I have the below react class which fetches the geolocation through the browser.</p>
  
  <p>I am mapping a leaflet map. I want to geolocation to be an input to the setView, for such that the map "zooms" into the region of the client browser location. </p>
  
  <p>Here's the react class:    </p>
  
  <pre><code>    import React from 'react';
      import L from 'leaflet';
      import countries from './countries.js'; 
  
      var Worldmap = React.createClass({
  
          render: function() {
  
              let geolocation = [];
  
              navigator.geolocation.getCurrentPosition(function(position) {
                  let lat = position.coords.latitude;
                  let lon = position.coords.longitude;
                  geolocation.push(lat, lon);
                  locationCode()
              });
  
              function locationCode() {
                  if(geolocation.length &lt;= 0)
                      geolocation.push(0, 0);
              }
  
  
              let map = L.map('leafletmap').setView(geolocation, 3);
  
              L.geoJSON(countries, {
                  style: function(feature) {
                      return {
                          fillColor: "#FFBB78",
                          fillOpacity: 0.6,
                          stroke: true,
                          color: "black",
                          weight: 2
                      };
                  }
              }).bindPopup(function(layer) {
                  return layer.feature.properties.name;
              }).addTo(map);
  
              return (
                  &lt;div id="leafletmap" style={{width: "100%", height: "800px" }}/&gt;
              )
          }
      });
  
      export default Worldmap
  </code></pre>
  
  <p>It's called in a main file where the HTML is rendered as <code>&lt;WorldMap /&gt;</code>.</p>
  
  <p>I get the error <code>Uncaught Error: Map container not found.</code> when loading the page. Looking around, usually it would be because the map is trying to be displayed in a div before being provided values((gelocation, 3) in this case). However, it shouldn't display it before being returned from the render function below. </p>
  
  <p>What could the issue be?</p>
  
  <p>Printing out the <code>geolocation</code> in the console correctly fetches the coordinates, so that doesn't seem to be the issue. </p>