How to retrieve data from date in weather api?

Question

I'am working on Reactjs weather project and retrieving data from apixu.com, which has all the details of current and forecast weather.

I'am able to retrieve almost all data required for Weather App except date, i.e ranging from today's date till 5 day forecast. I don't know how to get the date, did a lot of trials but, all in vain. So, some solution expected. Thanks in advance.

1. App.js

This piece of code gets data from api

const api_call2 = await fetch(`https://api.apixu.com/v1/forecast.json?` + 
    `key=${API_KEY2}&q=${city}&days=5`);
    const data2 = await api_call2.json();

Here state is set to forecastdays

forecastdays: data2.forecast.forecastday

State is defined

<ForecastDays forecastdays={forecastdays}/>

2. index.js

Here forecastdays is called via props

export class ForecastDays extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }
    render() {
        const { forecastdays} = this.props;
        return (
            <div>
            {
                forecastdays && forecastdays.map((day, idx) => {
                    return <WeatherForecast day={day.day} key={idx} />
                })
            },
            {
                forecastdays && forecastdays.map((date, idy) => {
                    return <WeatherForecast date={date.date} key={idy} />

                })
            }
            </div>
        )
    }
}

Here you can see above day and date are 2 parameters which is mapped and defined in WeatherForecast.js file

3. WeatherForecast.js

export class WeatherForecast extends Component {
        constructor(props) {
            super(props);
            this.state = {};
        }
        render() {
            const { day, date } = this.props;

            // DATE first returns undefined and then loads data
            console.log('DATE', date)

            if(!day) return null;
            return (
                <div>
                <MDBCardBody className="forecast-body">
                <MDBCardHeader className="forecast-header">
                    <div className="inner-container">
                        <h2>{date}</h2> // Doesn't display date
                        <img src={day.condition.icon} />
                        <div className="text">{day.avgtemp_c}°C</div>
                        <div className="muted-text">{day.condition.text}</div>
                    </div>
                </MDBCardHeader> 

                </MDBCardBody>
                <br/>
                </div>
            )
        }
}

 export default WeatherForecast

I got the data within 'day' object but not in 'date'

Answer 1

As you iterate two times for this forecastdays array, So instead of iterate two times you could iterate single and pass your props in WeatherForecast component like below

forecastdays && forecastdays.map(o => <WeatherForecast day={o.day} date={o.date} />)

Please check below code snippet and working stackblitz demo.

class ForecastDays extends Component {
  constructor() {
    super();
    this.state = {
      location:data.location.name,
      forecastdays: data.forecast.forecastday
    };
  }
  render() {
    const {forecastdays} = this.state;
    return (
      <div>
        <h1>City :- {this.state.location}</h1>
        {  
          forecastdays && forecastdays.map(o => <WeatherForecast day={o.day} date={o.date} />)
        }
      </div>
    );
  }
}