title: Can't render parent props
body: <p>I'm making a React app using openweathermap API. Right now I receive the list of weather data. I'm trying to highlight the weather if I click it.</p>
  
  <p>To make this happen, I wrote  on App.js to pass a prop to WeatherDetail.js, but so far seems like WeatherDetail.js doesn't recognize props from its parent.</p>
  
  <pre><code>class App extends React.Component {
      constructor(props) {
          super(props);
      }
      state = { forecasts: [], selectedWeather: null }
  
      getWeather = async city =&gt; {
          const response = await weather.get('/forecast', {
              params: {
                  q: city
              }
          });
              this.setState ({
                  forecasts: response.data.list,
                  city: response.data.city.name,
                  selectedWeather: response.data.list[0]
              })            
          }
      }
  
      onWeatherSelectFunction = (item) =&gt; {
          this.setState({ selectedWeather: item });
      };
  
      render() {
          return (
              &lt;div&gt;
                  &lt;Form loadWeather={this.getWeather} /&gt;
                  &lt;WeatherDetail itemToChild={this.state.selectedWeather} /&gt;
                  &lt;WeatherList                     
                      onWeatherSelect={this.onWeatherSelectFunction}
                      weathers={this.state.forecasts}
                      city={this.state.city}
                  /&gt;
              &lt;/div&gt;
          );        
      }
  }
  
  export default App;
  </code></pre>
  
  <pre><code>const WeatherDetail = ({forecasts, itemToChild}, props) =&gt; {
      const weather = props.itemToChild;
      if(!weather) {
          return &lt;div&gt;Loading...&lt;/div&gt;;
      }
      return &lt;div&gt;{weather.humidity}&lt;/div&gt; &lt;-- This doesn't appear on screen
      );
  }
  </code></pre>
  
  <pre><code>const WeatherItem = ({item, onWeatherSelectFromList, humidity, city, temp }) =&gt; {
  
          return (
              &lt;div&gt;                
                  &lt;div onClick={() =&gt; onWeatherSelectFromList(item)} &gt;
                          {city}&lt;br /&gt; &lt;-- Appears on screen
                          {humidity}&lt;br /&gt; &lt;-- Appears on screen
                  &lt;/div&gt;
              &lt;/div&gt;
          );
  };
  </code></pre>
  
  <pre><code>const WeatherList = ({weathers, onWeatherSelect, city}) =&gt; {           
          const renderedList = weathers.map((item) =&gt; {
              return (
                  &lt;div&gt;
                      &lt;WeatherItem
                          city={city}
                          temp={item.main.temp}
                          humidity={item.main.humidity}
                          temperature={item.weather.icon}
                          onWeatherSelectFromList={onWeatherSelect}
                      /&gt;
                  &lt;/div&gt;
              );
          });        
          return (
              &lt;div className="flex"&gt;
                  {renderedList}
              &lt;/div&gt;
          );
  }
  </code></pre>
  
  <pre><code>class Form extends React.Component {
      state = { term: '' };
  
      onFormSubmit = (event) =&gt; {
          event.preventDefault();
  
          this.props.loadWeather(this.state.term);
      }
  
      render() {
          return (
              &lt;div&gt;
                  &lt;form onSubmit={this.onFormSubmit}&gt;
                          &lt;input   
                          ref="textInput"
                          type="text" 
                          value={this.state.term} 
                          onChange={event =&gt; this.setState({term: event.target.value})}
                          /&gt;
                          &lt;button&gt;Get Weather&lt;/button&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>How do I connect App.js and WeatherDetail.js using props?</p>