Unhandled Rejection (TypeError): Cannot read property '1/22/20' of undefined

[Progressive-Programmer]

59 | }; 60 | chartData.push(newDataPoint); 61 | }

62 | lastDataPoint = data[casesType][date]; 63 | } 64 | return chartData; 65 | };

[Progressive-Programmer]

Got the fix after checking the video multiple times. src/LineGraph.js file has the error

instead of ; const buildChartData = (data, casesType)

it should be; const buildChartData = (data, casesType = 'cases' )

This is missing even in this project. @Nazariy995 @CleverProgrammer Please check and update it. I am a beginner and it took me long to find this tiny mistake. And Thanks for the wonderful live projects that you guys have put up. Simply love it!!

[alex197925]

thank you.

[chelstay]

Thank you! This helped me :)

[Progressive-Programmer]

Thank you! This helped me :)

I am glad !! I am also a fellow beginner into programming and I can understand how difficult it is to find out a minute mistake even when you are following a tutorial. It took me long to understand. But, at the same this process does enhance our understanding. Lets get better together !!!

[Progressive-Programmer]

thank you.

I am glad, Alex !! I am also following the clone series from Clever Programming and I'll try to point errors and solutions, if and whenever I face them, so other new programmers can also benefit from them.

[Ansukun]

hey it"s not soving my issue plz check

import React ,{useEffect,useState}from 'react' import Line from "react-chartjs-2" import numeral from "numeral"

const options = { legend:{ display :false }, elements :{ points:{ radius :0, }, }, maintainAspectRatio: false, tooltips: { mode: "index", intersect: false, callbacks: { label: function (tooltipItem, data) { return numeral(tooltipItem.value).format("+0,0"); }, }, }, scales: { xAxes: [ { type: "time", time: { format: "MM/DD/YY", tooltipFormat: "ll", }, }, ], yAxes: [ { gridLines: { display: false, }, ticks: { // Include a dollar sign in the ticks callback: function (value, index, values) { return numeral(value).format("0a"); }, }, }, ], }, };

const buildChartData = (data, casesType) => { let chartData = []; let lastDataPoint; for (let date in data.cases) { if (lastDataPoint) { let newDataPoint = { x: date, y: data[casesType][date] - lastDataPoint, }; chartData.push(newDataPoint); } lastDataPoint = data[casesType][date]; } return chartData; };

function LineGraph({casesType}) { const [data,setdata] = useState({});

useEffect(()=> {
    const fetchData = async () => {
        await fetch ("https://disease.sh/v3/covid-19/historical/all?lastdays=120")
        .then(response => response.json())
        .then(data => {
              let chartData = buildChartData(data, casesType );
                 console.log(chartData)
                 setdata(chartData);

        })

    }

    fetchData();

},[casesType])

return (
    <div>

        <h1>Graph</h1>
        {data?.length>0 &&( <Line 
        options = {options}
        data = {{
            datasets:[
                {
                backgroundColor: "rgba(204, 16, 52, 0.5)",
                borderColor: "#CC1034",    
                data:data,
                },

            ],
        }} 
        />)}

    </div>
)

}

export default LineGraph