title: ReactJS - TypeError: Cannot read property '0' of undefined
body: <p>I'm trying to make a weather app in order to learn some ReactJS.</p>
  
  <p>I called the <em><a href="https://openweathermap.org/" rel="nofollow noreferrer">OpenWeatherMap</a></em> API using this fetch in a <code>componentDidMount</code> method inside of my <code>WeatherCard</code> component.</p>
  
  <pre><code>constructor() {
      super()
      this.state = {
          weatherData: {}
      }
  }
  
  componentDidMount() {
      fetch('//api.openweathermap.org/data/2.5/weather?q=Calgary,ca&amp;APPID=XXX')
      .then(response =&gt; response.json())
      .then(data =&gt; {
          this.setState({
              weatherData: data
          })
      })
  }
  </code></pre>
  
  <p>Here's a sample JSON output of the above call (given a valid API key):</p>
  
  <p><a href="https://i.stack.imgur.com/O8JpJ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/O8JpJ.jpg" alt="enter image description here"></a></p>
  
  <p>I get this error message whenever I want to access a weather property:</p>
  
  <blockquote>
    <p>TypeError: Cannot read property '0' of undefined</p>
  </blockquote>
  
  <p>... and I access it like this:</p>
  
  <p><code>this.state.weatherData.weather[0].main</code></p>
  
  <p>Here is also my render method if it helps with the problem:</p>
  
  <pre><code>render() {
      return (
          &lt;div&gt;
              {this.state.weatherData.weather[0].main}
          &lt;/div&gt;
      )
  }
  </code></pre>
  
  <p>Does anyone know what might be the problem I'm running into? Thanks a lot!</p>