title: Passing data through props and then setting to state becomes undefined?
body: <p>On page load I'm getting the weather data for an api and then displaying it on sidebar  then when you click on a city it shows the the city's weather in more detail. So basically I've been passing the data around from parent to child with props. I need to fill the detailed component with some initial data so I'm trying to send the first object in the data array to the child component through props and set it to state but when I try to render it is undefined and I'm not sure why.</p>
  <p>It actually seems to be coming back undefined a couple times before setting it but when I try to render it on the page {weather.data.temp} I get 'Cannot read property 'temp' of undefined'.</p>
  <p><a href="https://i.stack.imgur.com/EKc4w.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EKc4w.png" alt="data" /></a></p>
  <p>Parent:</p>
  <pre><code>const fetchCity = async (city) =&gt; {
      const res = await axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${city}&amp;appid=${key}`);
  
      return {
          description: res.data.weather[0].description,
          icon: res.data.weather[0].icon,
          temp: res.data.main.temp,
          city: res.data.name,
          country: res.data.sys.country,
          id: res.data.id,
      };
  };
  
  function App() {
      const [data, setData] = useState([]);
  
      const [activeWeather, setActiveWeather] = useState([]);
  
      useEffect(() =&gt; {
          const fetchCities = async () =&gt; {
              const citiesData = await Promise.all([&quot;Ottawa&quot;, &quot;Toronto&quot;, &quot;Vancouver&quot;, &quot;California&quot;, &quot;London&quot;].map(fetchCity)).catch((err) =&gt; {
                  console.log(err);
              });
  
              setData((prevState) =&gt; prevState.concat(citiesData));
          };
  
          fetchCities();
      }, []);
  
      const handleClick = (event) =&gt; {
          const weather = JSON.parse(event.target.dataset.value);
          setActiveWeather(weather);
      };
  
      return (
          &lt;div className=&quot;App&quot;&gt;
              &lt;Header /&gt;
              &lt;Container&gt;
                  &lt;Row&gt;
                      &lt;Col&gt;
                          &lt;WeatherPanel data={data} handleClick={handleClick} /&gt;
                      &lt;/Col&gt;
                      &lt;Col&gt;
                          &lt;ActiveWeather activeWeather={activeWeather} data={data[0]} /&gt;
                      &lt;/Col&gt;
                  &lt;/Row&gt;
              &lt;/Container&gt;
          &lt;/div&gt;
      );
  }
  
  export default App;
  </code></pre>
  <p>Child</p>
  <pre><code>    import React, { useEffect, useState } from &quot;react&quot;;
      import { Container, Card } from &quot;react-bootstrap&quot;;
      
      const ActiveWeather = (props) =&gt; {
          const [weather, setWeather] = useState();
      
          useEffect(() =&gt; {
              setWeather(props.data);
          }, [props]);
      
          console.log(weather);
          return (
              &lt;Container&gt;
                  &lt;Card&gt;
                      &lt;Card.Header&gt; &lt;/Card.Header&gt;
                      {weather.temp}
                  &lt;/Card&gt;
              &lt;/Container&gt;
          );
      };
      
  export default ActiveWeather;
  </code></pre>
  <p>Other child</p>
  <pre><code> const WeatherPanel = (props) =&gt; {
      return (
          &lt;div&gt;
              &lt;Container fluid&gt;
                  &lt;Card style={{ boxShadow: &quot;0  0  10px 2px lightgrey&quot; }}&gt;
                      &lt;Card.Header&gt; Favorite Location&lt;/Card.Header&gt;
                      &lt;ListGroup variant=&quot;flush&quot;&gt;
                          &lt;ListGroup.Item&gt;
                              {props.data.map((item) =&gt; (
                                  &lt;ListGroup.Item key={item.id} data-value={JSON.stringify(item)} onClick={props.handleClick}&gt;
                                      &lt;img src={`http://openweathermap.org/img/wn/${item.icon}@2x.png`} alt=&quot;Weather Icon&quot; /&gt;
                                      {item.city + &quot;, &quot; + item.country}
                                  &lt;/ListGroup.Item&gt;
                              ))}
                          &lt;/ListGroup.Item&gt;
                      &lt;/ListGroup&gt;
                  &lt;/Card&gt;
              &lt;/Container&gt;
          &lt;/div&gt;
      );
  };
  
  export default WeatherPanel;
  </code></pre>