Cannot read properties of undefined (reading '0') while passing values to another component

Question

I have written the following code to pass values to infobox but i am getting an error uncaught TypeError: Cannot read properties of undefined (reading '0').please tell where i am wrong.

import React,{useState} from 'react'
function App() {
   const [specificState, setSpecificState] = useState({});
   const jsondata1 = await fetch('https://covid-19-fastest-update.p.rapidapi.com/summary');
    const myData1 = await jsondata1.json();
    const indData = myData1.Countries[77];
   const getdata=()=>{
    const temp =[];
     temp ['Confirmed']= [indData.NewConfirmed, indData.TotalConfirmed]
     temp['Recovered'] = [indData.NewConfirmed, indData.NewConfirmed - indData.TotalDeaths]
     temp ['Deaths']= [indData.TotalDeaths, indData.NewDeaths] 
    setSpecificState(temp);
   }
   useEffect(() => {
    getdata();
   }, [])
   
  return (
    <div> <InfoBox title="Coranavirus cases" cases={ specificState.Confirmed[0] } 
   total={ specificState.Confirmed[1] } />  </div>
  )
}

export default App

Answer 1

You need to make your fetch requests inside of useEffect.

update your get data function like this;

   const getdata=()=>{
  const jsondata1 = await fetch('https://covid-19-fastest-update.p.rapidapi.com/summary');
    const myData1 = await jsondata1.json();
    const indData = myData1.Countries[77];
    const temp =[];
     temp ['Confirmed']= [indData.NewConfirmed, indData.TotalConfirmed]
     temp['Recovered'] = [indData.NewConfirmed, indData.NewConfirmed - indData.TotalDeaths]
     temp ['Deaths']= [indData.TotalDeaths, indData.NewDeaths] 
    setSpecificState(temp);
   }

remove the fetch and other operations from the body of the component.

then you need to wait for state to be fetched, you need to render your component conditionally.

  return (
    <div> {spesificState.Confirmed && <InfoBox title="Coranavirus cases" cases={ specificState.Confirmed[0] } 
   total={ specificState.Confirmed[1] } /> } </div>
  )
}

maybe something like this.

Answer 2

When state is initially loaded, specificState is an empty object so no Confirmed property is found (undefined)

So at first render, this will throw this exception. When useEffect runs and retrieves results, then this property is loaded and then you can use your InfoBox class.

So instead use

return (
   {specificState.Confirmed ?  <div> <InfoBox title="Coranavirus cases" cases={ specificState.Confirmed[0] } 
   total={ specificState.Confirmed[1] } />  </div> : null }
  )

Answer 3

You can create statement using if operator in useEffect hook, because right now your fetched data is not uploaded yet when you try to use indData. Just cover your getdata function in useEffect like this:

useEffect(() => {
   if (indData) {
     getdata();
   }
}, [indData])

Also, you need to add extra values while passing cases and total attributes in InfoBox component, just pass empty array using | []