Leaflet: Map container not found : <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>
