title: Invalid LngLat object: (NaN, NaN) in react js , "Mapbox"
body: <p><strong>The project concept is to get geolocation and showing Mapbox map using API...</strong></p>
  <pre><code>import ReactDOM from &quot;react-dom&quot;;
  import React, { useRef, useEffect } from &quot;react&quot;;
  import { geolocated } from &quot;react-geolocated&quot;;
  import mapboxgl from &quot;mapbox-gl&quot;;
  import fetchFakeData from &quot;./api/fetchFakeData&quot;;
  import Popup from &quot;./components/Popup&quot;;
  import &quot;./App.css&quot;;
  
  mapboxgl.accessToken =&quot;pk.eyJ1IjoiamFja3Nvbi1rYXNpIiwiYSI6ImNrbzdsaDJvNTFvc3Eycm9pdTRxYmRxZjUifQ.BzA0w0U7lP0Ka3FcKkI_1Q&quot;;
  
  const App = (props) =&gt; {
  const mapContainerRef = useRef(null);
  const popUpRef = useRef(new mapboxgl.Popup({ offset: 15 }));
  </code></pre>
  <p>// initialize map when component mounts</p>
  <pre><code>useEffect(() =&gt; {
  const map = new mapboxgl.Map({
    container: mapContainerRef.current,
    // See style options here: https://docs.mapbox.com/api/maps/#styles
    style: &quot;mapbox://styles/mapbox/streets-v11&quot;,
    center: [props.lat, props.long],
    zoom: 12.5
  });
  </code></pre>
  <p>// add navigation control (zoom buttons)</p>
  <pre><code>map.addControl(new mapboxgl.NavigationControl(), &quot;bottom-right&quot;);
  
  map.on(&quot;load&quot;, () =&gt; {
    // add the data source for new a feature collection with no features
    map.addSource(&quot;random-points-data&quot;, {
      type: &quot;geojson&quot;,
      data: {
        type: &quot;FeatureCollection&quot;,
        features: []
      }
    });
  </code></pre>
  <p>// now add the layer, and reference the data source above by name</p>
  <pre><code>  map.addLayer({
      id: &quot;random-points-layer&quot;,
      source: &quot;random-points-data&quot;,
      type: &quot;symbol&quot;,
      layout: {
        // full list of icons here: https://labs.mapbox.com/maki-icons
        &quot;icon-image&quot;: &quot;bakery-15&quot;, // this will put little croissants on our map
        &quot;icon-padding&quot;: 0,
        &quot;icon-allow-overlap&quot;: true
      }
    });
  });
  
  map.on(&quot;moveend&quot;, async () =&gt; {
    // get new center coordinates
    const { lng, lat } = map.getCenter();
    // fetch new data
    const results = await fetchFakeData({ longitude: lng, latitude: lat });
    // update &quot;random-points-data&quot; source with new data
    // all layers that consume the &quot;random-points-data&quot; data source will be updated automatically
    map.getSource(&quot;random-points-data&quot;).setData(results);
  });
  
  // change cursor to pointer when user hovers over a clickable feature
  map.on(&quot;mouseenter&quot;, &quot;random-points-layer&quot;, (e) =&gt; {
    if (e.features.length) {
      map.getCanvas().style.cursor = &quot;pointer&quot;;
    }
  });
  
  // reset cursor to default when user is no longer hovering over a clickable feature
  map.on(&quot;mouseleave&quot;, &quot;random-points-layer&quot;, () =&gt; {
    map.getCanvas().style.cursor = &quot;&quot;;
  });
  
  // add popup when user clicks a point
  map.on(&quot;click&quot;, &quot;random-points-layer&quot;, (e) =&gt; {
    if (e.features.length) {
      const feature = e.features[0];
      // create popup node
      const popupNode = document.createElement(&quot;div&quot;);
      ReactDOM.render(&lt;Popup feature={feature} /&gt;, popupNode);
      // set popup on map
      popUpRef.current
        .setLngLat(feature.geometry.coordinates)
        .setDOMContent(popupNode)
        .addTo(map);
    }
  });
  
  // clean up on unmount
  return () =&gt; map.remove();
  }, []); // eslint-disable-line react-hooks/exhaustive-deps
  
  return &lt;div className=&quot;map-container&quot; ref={mapContainerRef} /&gt; 
  };
  
  export default geolocated({
  positionOptions: {
  enableHighAccuracy: false
  },
  userDecisionTimeout: 5000
  })(App);
  
  class Gps extends React.Component {
  constructor() {
  super();
  
  this.state = {
    latitude: &quot;&quot;,
    longitude: &quot;&quot;
  };
  
  this.getMyLocation = this.getMyLocation.bind(this);
  }
  
  componentDidMount() {
  this.getMyLocation();
  }
  
  getMyLocation() {
  const location = window.navigator &amp;&amp; window.navigator.geolocation;
  
  if (location) {
    location.getCurrentPosition(
      (position) =&gt; {
        this.setState({
          latitude: position.coords.latitude,
          longitude: position.coords.longitude
        });
      },
      (error) =&gt; {
        this.setState({
          latitude: &quot;err-latitude&quot;,
          longitude: &quot;err-longitude&quot;
        });
      }
    );
  }}
  
  render() {
  const { latitude, longitude } = this.state;
  
  return (
    &lt;div&gt;
      &lt;App lat={latitude} long={longitude} /&gt;
    &lt;/div&gt;
  );
  }
  }
  </code></pre>
  <p><strong>please see this link &quot;codesandbox&quot; : <a href="https://codesandbox.io/s/determined-river-7dt0h?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/determined-river-7dt0h?file=/src/App.js</a></strong></p>
  <p><strong>props didn't work.</strong></p>
  <p><strong>see this lines:</strong></p>
  <ol>
  <li><p>center: [props.lat, props.long]</p>
  </li>
  <li><p>&lt;App lat={latitude} long={longitude}  / &gt;</p>
  </li>
  </ol>
  <p><a href="https://i.stack.imgur.com/e3cWJ.png" rel="nofollow noreferrer">screenshot</a></p>