title: react useEffect hooks with axios cannot read property of undefined
body: <p>This is based on exercise 2.14 of this course <a href="https://fullstackopen.com/en/part2/getting_data_from_server" rel="nofollow noreferrer">https://fullstackopen.com/en/part2/getting_data_from_server</a>.</p>
  
  <p>The user can select a country, then the weather information for that country's capital will be dislpayed. My code gives me error <strong>Cannot read property 'temperature' of undefined</strong></p>
  
  <pre><code>const Weather = ({ city }) =&gt; {
  const [weatherDetails, setWeatherDetails] = useState([])
  
  useEffect(() =&gt; {
      axios.get('http://api.weatherstack.com/current', {
          params: {
              access_key: process.env.REACT_APP_WEATHER_KEY,
              query: city
          }
      }).then(
          (response) =&gt; {
              setWeatherDetails(response.data)
          }
      )
  }, [city])
  console.log('weather', weatherDetails);
  
  return (
      &lt;div&gt;
          &lt;h3&gt;Weather in {city} &lt;/h3&gt;
          {weatherDetails.current.temperature}
      &lt;/div&gt;
  )}
  </code></pre>
  
  <p>Basically, the line </p>
  
  <pre><code>{weatherDetails.current.temperature}
  </code></pre>
  
  <p>makes my code crash. When I do remove that line, I am able to see the response thanks to the console.log, but there are two consecutive logs</p>
  
  <pre><code>weather []
  weather {request: {…}, location: {…}, current: {…}}
  </code></pre>
  
  <p>I figured that my code happens in between these two, and it tries to access the data before it has even arrived, but I don't know what to do to fix this.</p>
  
  <p>Also, I don't know what the argument [city] of useEffect() does, so it'd be great if someone can explain to me what it does.</p>
  
  <p><strong>Edit: Solved!</strong>
  Set weatherDetail's initial state to null and did some conditional rendering</p>
  
  <pre><code>if (weatherDetails) {
      return (
          &lt;div&gt;
              &lt;h3&gt;Weather in {capital}&lt;/h3&gt;
              {weatherDetails.current.temperature} Celsius
          &lt;/div&gt;
      )
  } else {
      return (
          &lt;div&gt;
              Loading Weather...
          &lt;/div&gt;
      )
  }
  </code></pre>