CODEWITHSUNDEEP
reactjsreact-hooks
Natsuo
Natsuo

Reputation: 113

UseEffect hook does not work or how to display async data

I am learning react and making a project that has a component that needs to display async information:

function ShortStatistic() {

    const [coronaData, setCoronaData] = useState([]);
    
    useEffect(() => {
        (async () => {
            const fetchedPosts = await getCoronaData();
            setCoronaData(fetchedPosts);
        })();
        console.log("UseEffectCall");
    }, []);

    async function getCoronaData() {
        const URL = "https://api.covid19api.com/summary";
        const requestOptions = {
            method: 'GET',
            redirect: 'follow'
        };
      
        const response = await fetch(URL, requestOptions);
        const data = await response.json();
        return data;
    }


    return (
        <div className="stat">
             <div className="stat_infected">
                  Infected:
                    <span className="infected_numbers">
                         {(coronaData["Global"]["TotalConfirmed"])}
                    </span>
              </div>
        </div>
    )
}

But I am getting an error: "TypeError: Cannot read property 'TotalConfirmed' of undefined", what means setCoronaData() didn't work. Also, there is no message output from the useEffect hook (console.log("UseEffectCall");) in the console. What is the problem?

Upvotes: 2

Views: 215

Answers (1)

Erfan HosseinPoor
Erfan HosseinPoor

Reputation: 1077

for first render your coronaData variable is an empty array [] and when you call

coronaData["Global"]["TotalConfirmed"]

it means undefined

You can use

coronaData?.["Global"]?.["TotalConfirmed"]

Upvotes: 2

Related Questions