How output nested object value

JavaScript
#1

Check objects by clicking on this link

http://api.openweathermap.org/data/2.5/forecast?id=524901&APPID=e8780420f8d0a3cf13e80ff3ad27cf96

Example of my ReactJS code

https://codeshare.io/5vgPrn

I want to get the main child object value, but cannot get access to that. So what should I do to make this work?

#2

This is probably not what you will want to use in your final version, but it should help you to understand how to get the data you see and display it in a very generic way on the page.

  .
  .
  .
  .

  render() {
    const {isLoaded, items } = this.state;
    console.log(items)

    if(!isLoaded) {
      return <div>Loading</div>
    }

    else {
      return (
        <div className="App">
            Data has been loaded !
            <ul>
                {items.list.map((item, index) => <HourlyForecast time={item.dt} data={item.main} />)}
            </ul> 
        </div>
      );
    }
  }
}

const HourlyForecast = ({ time, data }) => {
  const weatherData = Object
    .keys(data)
    .map(propName => `${propName}: ${data[propName]}`).join(', ');
  return <li key={time}>{weatherData}</li>;
};
#3