dailyData returned empty array

[isakulaksiz]

Chart.jsx

import React, {useState, useEffect} from 'react';
import { fetchDailyData } from '../../api';
import { Line, Bar } from 'react-chartjs-2';
import styles from './Chart.module.css';

` const Chart = () => { const [dailyData, setDailyData] = useState([]);

useEffect(() => {
    const fetchApi = async () => {
        setDailyData(await fetchDailyData());
    }

    fetchApi();
});

console.log("dailyData: ", dailyData);

const lineChart = (
    dailyData.length
    ?  (   
        <Line  data={{
        labels: dailyData.map(({date}) => date), 
        datasets: [{
            data: dailyData.map(({ confirmed }) => confirmed),
            label: 'Infected',
            borderColor: '#3333fff',
            fill: true,
        },{
            data: dailyData.map(({ deaths }) => deaths),
            label: 'Deaths',
            borderColor: 'red',
            backgroundColor: 'rgba(255, 0, 0, 0.5)',
            fill: true,
        }]
    }} />) : null

);

return(
   <div className={ styles.container }>
       {lineChart}
   </div>
)

}

export default Chart; `

[sanchit-mishra]

I would like to work on this issue

[sanchit-mishra]

I checked it out and since it's giving Bad Gateway Error (Code: 502), it's mainly due to because one of the edge server is giving you invalid response that is no data and this is the reason the dailyData return an empty array because actually it is not getting any response from that api request.

[zpreston123]

Issue relates to the API: https://github.com/mathdroid/covid-19-api/issues/303