How output nested object value

Check objects by clicking on this link

Example of my ReactJS code

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

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;

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

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

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