title: Getting props from parent component state to render data
body: <p>I am building a weather app.
  The behavior would be to have a Button in my main menu. This Button should display the current weather. When clicking this button it should display a card with all the weather informations. This is pretty similar to Momentum <a href="https://i.stack.imgur.com/HPPuU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HPPuU.png" alt="https://momentumdash.com/"></a> </p>
  
  <p>I could successfully create my Weather Card displaying the current Weather and also the forecast.<a href="https://i.stack.imgur.com/MhNQv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MhNQv.png" alt="(/home/starke/Screenshot from 2019-04-06 14-57-35.png"></a></p>
  
  <p>My issue is I do not know how to display the weather in my button before I click on it to display weather. Not sure how to access my data and render it.</p>
  
  <p>My SideMenu component displaying the Menu</p>
  
  <pre><code>export default class SideMenu extends React.Component {
      constructor(props) {
          super(props);
      }
  
      changeView(e, view) {
        e.preventDefault();
        this.props.changeView(view);
      }
  
      render() {
        const { cityName } = this.props;
              return (&lt;Menu&gt;
                &lt;Button onClick={(e) =&gt; this.changeView(e, "weather")}&gt;
                &lt;/Button&gt;
                &lt;Button onClick={(e) =&gt; this.changeView(e, "todo")}&gt;
                  ToDo
                &lt;/Button&gt;
                &lt;Button onClick={(e) =&gt; this.changeView(e, "pomodoro")}&gt;
                  Pomo
                &lt;/Button&gt;
                &lt;Button onClick={(e) =&gt; this.changeView(e, "picture")}&gt;
                  Info
                &lt;/Button&gt;
              &lt;/Menu&gt;);
      }
  }
  
  
  </code></pre>
  
  <p>The Weather Card component where I get the data from the API and render it</p>
  
  <pre><code>class WeatherCard extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        temperature: "",
        latitude: "",
        longitude: "",
        summary: "",
        cityName: "",
        numForecastDays: 5,
        isLoading: false
      };
    }
  
    componentDidMount() {
      this.getLocation();
    }
  
    // Use of APIXU API with latitude and longitude query
    getWeather() {
      const { latitude, longitude, numForecastDays } = this.state;
      const URL = `https://api.apixu.com/v1/forecast.json?key=${KEY}&amp;q=${latitude},${longitude}&amp;days=${numForecastDays}`;
      axios
        .get(URL)
        .then(res =&gt; {
          const data = res.data;
  
          this.setState({
            cityName: data.location.name + ", " + data.location.region,
            summary: data.current.condition.text,
            temperature: data.current.temp_c,
            forecastDays: data.forecast.forecastday,
            iconURL: data.current.condition.icon
          });
        })
        .catch(err =&gt; {
          if (err) console.log(err);
        });
    }
  
    // function using current longitude and latitude of user
    // This requires authorization from user // Could be changed using IP adress instead, but would be less precise
    getLocation() {
      navigator.geolocation.getCurrentPosition(
        position =&gt; {
          this.setState(
            prevState =&gt; ({
              latitude: position.coords.latitude,
              longitude: position.coords.longitude
            }),
            () =&gt; {
              this.getWeather();
            }
          );
        },
        error =&gt; this.setState({ forecast: error.message }),
        { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
      );
    }
    render() {
      const {
        summary,
        temperature,
        cityName,
        iconURL,
        forecastDays,
        isLoading
      } = this.state;
      return (
        &lt;div&gt;
          {isLoading &amp;&amp; (
            &lt;div&gt;
              &lt;Spinner /&gt;
              &lt;LoaderText&gt;Loading....&lt;/LoaderText&gt;
            &lt;/div&gt;
          )}
          {!isLoading &amp;&amp; (
            &lt;Wrapper&gt;
              &lt;CurrentWeather
                cityName={cityName}
                summary={summary}
                temperature={temperature}
                icon={iconURL}
              /&gt;
              &lt;Forecast forecastDays={forecastDays} /&gt;
            &lt;/Wrapper&gt;
          )}
        &lt;/div&gt;
      );
    }
  }
  
  export default WeatherCard;
  
  </code></pre>