title: React: Uncaught TypeError: this.state.data.map is not a function and
body: <p>I did some digging on this already but haven't come up with a good solution yet. A similar question was asked <a href="https://stackoverflow.com/questions/39329100/uncaught-typeerror-this-state-data-map-is-not-a-function">here</a> but my difference is that I'm not trying to pass a <code>string</code> to the <code>map()</code> method.</p>
  
  <p>Anyways, I'm just building a simple weather checked app using React, I'm using the API from <a href="https://openweathermap.org/forecast5" rel="nofollow noreferrer">Open Weather Map API</a> 5 day forecast.</p>
  
  <p>The API works fine, I can log the data to my console using the below:</p>
  
  <pre><code>componentDidMount () {
      axios.get('http://api.openweathermap.org/data/2.5/forecast?q=London,uk&amp;appid=APIKEY')
          .then(response =&gt; {
             console.log(response.data);
          });
  
  }
  </code></pre>
  
  <p>But, when I got to map it to my array of component, I get the error from above, saying that <code>this.state.forecasts.map()</code> is not a function:</p>
  
  <p><strong>Weather.js</strong></p>
  
  <pre><code>class Weather extends Component {
  
      state = {
          forecasts: []
        }
  
      componentDidMount () {
          axios.get('http://api.openweathermap.org/data/2.5/forecast?q=London,uk&amp;appid=APIKEY')
              .then(response =&gt; {
                  this.setState({forecasts: response.data});
              });
  
      }
  
      render() {
  
          const projections = this.state.forecasts.map(forecast =&gt; {
              return (&lt;Subweather
                      date={forecast.dt_txt}
                      //temp={day.temp}
                      key={forecast.id}  /&gt; );
          });
  return (
              &lt;div className={classes.WeatherDiv}&gt;
                  {projections}
              &lt;/div&gt;
  </code></pre>
  
  <p>I'm a little confused as to what I'm missing here, any suggestions?</p>