title: How to update props, when state changes
body: <p>I have a method in my parent component of a weather app to update the unit (Metric/Imperial).</p>
  <pre><code>changeUnit = async (unit) =&gt; {
      const forecasts = { ...this.state.forecasts };
      forecasts['unit'] = unit = unit === 'Metric' ? 'Metric' : 'Imperial';
      this.setState({ forecasts });        
  }
  
  render() {
      return (
          &lt;div className=&quot;weather-data&quot;&gt;
              &lt;WeatherOverview 
                  currentWeather={this.state.currentForecast} 
                  changeUnit={this.changeUnit} 
              /&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>
  <p>This gets passed down to the weather over component, which then passes it down to the currentWeatherComponent</p>
  <pre><code>return (
              &lt;div className=&quot;weather-overview&quot;&gt;
                  &lt;CurrentWeatherData weather={this.props.currentWeather} status={this.props.currentWeather.isLoaded} changeUnit={this.props.changeUnit}/&gt;
              &lt;/div&gt;
          )
  </code></pre>
  <p>In the CurrentWeatherComponent I have a variable called unit, which takes the unit from props via state.</p>
  <pre><code>class CurrentWeatherData extends React.Component {
      
      render() {
          const unit = this.props.weather.unit;
          {console.log(unit)}
      }
     }
  </code></pre>
  <p>When state updates, the unit variable does not. How can I change the unit variable?</p>