reactjs - react useEffect fetch api data gives error TypeError: Cannot read property 'cases' of undefined

Question

import React,{useState,useEffect} from 'react'
import {Bar} from 'react-chartjs-2';

const Chart = ({val}) => {

    
   const [Dataa,setdata] = useState([]);
   useEffect(()=>{
     async function fetchData(){
        const apiresponse =await fetch('https://disease.sh/v3/covid-19/countries');
        const apidata =await apiresponse.json();
        console.log(apidata);
        setdata(apidata);
    }
    fetchData();
},[])


 const chartData = { labels: ['Total Cases', 'Deaths', 'Recovered','Active Cases'],
  datasets: [
    {
      label: 'My First dataset',
      backgroundColor: ['#737270','red','green'],
      borderColor: 'rgba(255,99,132,1)',
      borderWidth: 1,
      hoverBackgroundColor: 'rgba(255,99,132,0.4)',
      hoverBorderColor: 'rgba(255,99,132,1)',
      data: [Dataa && Dataa[val].cases,Dataa[val].deaths,Dataa[val].recovered,Dataa[val].active]     }
  ]
}

    
      return (
        <div>
            <h2>Bar Example</h2>
            <Bar
          data={chartData}
          width={100}
          height={190}
          options={{
            maintainAspectRatio: false
          }}
        />
        </div>
    )
}
export default Chart;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

When you create the chartData you are passing Dataa and you are not checking the length of it, so when you try to access the val position is undefined.

I would suggest checking the length of Dataa before passing it.

if (Dataa.length !== 0) {
    const chartData = { labels: ['Total Cases', 'Deaths', 'Recovered','Active Cases'],
    datasets: [
        {
            label: 'My First dataset',
            backgroundColor: ['#737270','red','green'],
            borderColor: 'rgba(255,99,132,1)',
            borderWidth: 1,
            hoverBackgroundColor: 'rgba(255,99,132,0.4)',
            hoverBorderColor: 'rgba(255,99,132,1)',
            data: [Dataa && Dataa[val].cases,Dataa[val].deaths,Dataa[val].recovered,Dataa[val].active]     
        }
   ]
   return (
    <div>
        <h2>Bar Example</h2>
        <Bar
      data={chartData}
      width={100}
      height={190}
      options={{
        maintainAspectRatio: false
      }}
    />
    </div>
   )
  }
} else {
    // Some component while data is loading
}

You would probably want to add a spinner or something in order to show that the application is doing something to render the component. In that case, you should return that component if the Dataa.length is equal to zero