react this.props undefined or empty object
<p>Building a small react app that passes the geolocation (determined by the browser to a child component as props).</p>

<p>The first component: App.jsx</p>

<pre><code>import React, {Component} from 'react';

import DateTime from './components/dateTime/_dateTime.jsx';
import Weather from './components/weather/_weather.jsx';
import Welcome from './components/welcome/_welcome.jsx';

require ('../sass/index.scss');

export default class App extends Component {

  constructor() {
    super();
    this.state = {
      latitude: '',
      longitude: ''
    };
    this.showPosition = this.showPosition.bind(this);
  }

  startApp () {
    this.getLocation();
  }

  getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(this.showPosition);
    } else {
        console.log("Geolocation is not supported by this browser.");
    }
  }

  showPosition(position) {
    this.setState({
        latitude: position.coords.latitude,
        longitude: position.coords.longitude
    })
  }

  componentWillMount () {
    this.startApp();
  }

  render() {
    return (
        &lt;div className="container"&gt;
            &lt;div className="header-container"&gt;
                &lt;Weather latitude={ this.state.latitude } longitude={ this.state.longitude } /&gt;
            &lt;DateTime /&gt;
            &lt;/div&gt;
            &lt;div className="welcome-container"&gt;
                &lt;Welcome name="Name" /&gt;
            &lt;/div&gt;
      &lt;/div&gt;
    );
  }
}
</code></pre>

<p>This component determines the location, saves the latitude and longitude to state and passes this information via props to the Weather.jsx component, which is working as you can see in the below image:</p>

<p><a href="https://i.stack.imgur.com/ovEff.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ovEff.png" alt="enter image description here"></a></p>

<p>And in the weather.jsx component I try and access these props and get either undefined or an empty object.</p>

<pre><code>import React, {Component} from 'react';
import Fetch from 'react-fetch';

export default class Weather extends Component {

    constructor(props) {
        super(props);
        this.state = {
          forecast: {},
          main: {},
          weather: {},
        };
        this.setWeather = this.setWeather.bind(this);
    }

    getWeather (latitude, longitude) {
        var self = this;

        fetch('http://api.openweathermap.org/data/2.5/weather?lat=' + latitude + '&amp;lon=' + longitude + '&amp;units=metric&amp;APPID=ed066f80b6580c11d8d0b2fb71691a2c')  
            .then (function (response) {  
                if (response.status !== 200) {  
                    console.log('Looks like there was a problem. Status Code: ' + response.status);  
                    return;  
                }

                response.json().then(function(data) {  
                    self.setWeather(data);
                });
            })

            .catch (function (err) {  
                console.log('Fetch Error :-S', err);  
            });
    }

    setWeather (forecast) {
        var main = forecast.main;
        var weather = forecast.weather[0];

        this.setState({
            main: main,
            weather: weather,
            forecast: forecast
        });
    }

    startApp () {
        this.getWeather(this.props.latitude, this.props.longitude);
    }

    componentWillMount () {
        this.startApp();
    }

    componentDidMount () {
        // window.setInterval(function () {
    //          this.getWeather();
    //  }.bind(this), 1000);
    }

  render() {
    return (
        &lt;div className=""&gt;
            &lt;div className="weather-data"&gt;
                &lt;span className="temp"&gt;{Math.round(this.state.main.temp)}&amp;#176;&lt;/span&gt;
                &lt;h2 className="description"&gt;{this.state.weather.description}&lt;/h2&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    )
  }
}
</code></pre>

<p>Really not sure what the issue is as the react dev tools shows that the weather component does indeed have the location set in the props which are passed down to that component.</p>

<p>Edit** Solved:</p>

<p>So the issue was that state is set asynchronously and that my weather component was rendered before state was updated.</p>

<p>A simple check of the values within state during the render method solved the issue.</p>

<pre><code>render() {

    if (this.state.latitude != '' &amp;&amp; this.state.longitude != '') {
      var weatherComponent = &lt;Weather latitude={ this.state.latitude } longitude={ this.state.longitude } /&gt;
    } else {
      var weatherComponent = null;
    }

    return (
        &lt;div className="container"&gt;
            &lt;div className="header-container"&gt;
                {weatherComponent}
            &lt;DateTime /&gt;
            &lt;/div&gt;
            &lt;div className="welcome-container"&gt;
                &lt;Welcome name="Name" /&gt;
            &lt;/div&gt;
      &lt;/div&gt;
    );
  }
</code></pre>