title: How iterate the values of an API through map in react?
body: <p>I want to render multiple objects (days) from a weather API</p>
  
  <pre><code>const  myApi = 'http://api.openweathermap.org/data/2.5/forecast?q=London,gb&amp;APPID=MY_UNIQUE_ID&amp;cnt=5'
  </code></pre>
  
  <p>I am setting the original state for these values in my APP class:</p>
  
  <pre><code>export default class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
        locationName: 'your local area',
        displayUnits: 'F',
        locTemp: '',
        humidity: '',
        weatherSummary: '',
        weatherSummaryDescription: '',
        dayID: '',
        dateFor: '',
        everyDay: []
      };
    }
  </code></pre>
  
  <p>I then set those values with a new state most of which is grabbed from the API:</p>
  
  <pre><code>componentWillMount() {
        superagent.get(myApi).then((response) =&gt; {
            console.log('CITY NAME IS' + response.body.city.name)
            console.log('RESPONSE BODY IS' + response.body)
          this.setState({
            locationName: response.body.city.name,
            locTemp: response.body.list[0].main.temp,
            humidity: response.body.list[0].main.humidity,
            weatherSummary: response.body.list[0].weather[0].main,
            weatherSummaryDescription: response.body.list[0].weather[0].description,
            dayID: response.body.list[0].dt,
            dateFor: response.body.list[0].dt_txt,
            everyDay: response.body
  
          })
  
  
        });
  
    }
  </code></pre>
  
  <p>I create a function output for my render function</p>
  
  <pre><code>export default class MyForecast extends React.Component {
  
    constructor(props) {
     super(props);
     this.state = {
       displayUnits: props.displayUnits
    };
  }
  
  
  
    render() {
  
      return (
        &lt;div&gt;
          &lt;h1&gt;Weather for&amp;nbsp;{this.props.locationName}&lt;/h1&gt;
          &lt;h3&gt; on {this.props.dateFor}&lt;/h3&gt;
          &lt;h2&gt;
              {this.props.weatherSummaryDescription} &amp;nbsp;
              &lt;Temp temp={this.props.locTemp} displayUnits={this.props.displayUnits} clickHandler={this.toggleDisplayUnits.bind(this)}/&gt;
          &lt;/h2&gt;
          &lt;WeatherIcon weather={this.props.weatherSummary} /&gt;
          &lt;p&gt;The ID for this day is &lt;strong&gt;{this.props.dayID}&lt;/strong&gt;&lt;/p&gt;
        &lt;/div&gt;);
    }
  
  
    toggleDisplayUnits() {
      this.state.displayUnits === 'F' ? this.setState({
        displayUnits: 'C'
      }) : this.setState({
        displayUnits: 'F'
      });
    }
  
  }
  </code></pre>
  
  <p>Then back in APP I drill through the <code>everyDay</code> object in order to generate 5 MyForecast instances with 5 different objects</p>
  
  <pre><code>render() {
  
       return (
         &lt;div&gt;
           {this.state.everyDay.map((data, i) =&gt;
             &lt;MyForecast
               key={i}
               locationName={data.locationName}
               dateFor={data.dateFor}
               weatherSummaryDescription={data.weatherSummaryDescription}
               weatherSummary={data.weatherSummary}
               locTemp={data.locTemp}
               dayID={this.state.dayID}/&gt;
           )}
         &lt;/div&gt;
       );
    }
  </code></pre>
  
  <p>This results in 2 errors:</p>
  
  <p><code>Uncaught TypeError: this.state.everyDay.map is not a function</code></p>
  
  <p>And </p>
  
  <p><code>Uncaught (in promise) TypeError: Cannot read property '_currentElement' of null</code></p>
  
  <p>Because it has no value for everyDay (body.response) as it is the wrong format (not an array)</p>
  
  <p>Any ideas of how to do this in the correct way?</p>
  
  <p>JSON FORMAT:</p>
  
  <pre><code>"city": {
      "id": 2643743,
      "name": "London",
      "coord": {
        "lon": -0.12574,
        "lat": 51.50853
      },
      "country": "GB",
      "population": 0,
      "sys": {
        "population": 0
      }
    },
    "cod": "200",
    "message": 0.1174,
    "cnt": 5,
    "list": [
      {
        "dt": 1485097200,
        "main": {
          "temp": 279.16,
          "temp_min": 278.192,
          "temp_max": 279.16,
          "pressure": 1033.03,
          "sea_level": 1040.8,
          "grnd_level": 1033.03,
          "humidity": 75,
          "temp_kf": 0.97
        },
        "weather": [
          {
            "id": 800,
            "main": "Clear",
            "description": "clear sky",
            "icon": "01d"
          }
  ...
  </code></pre>