How to solve the following TypeError: Cannot read properties of undefined

user_19892780 0
Viewed 65

This is the link to the api which I have been using. API link here

import React, { useEffect, useState } from "react";

const Statewise = () => {

    const [data, setData] = useState([]);

    const getCovidData = async () => {
        const res = await fetch('https://data.covid19india.org/data.json');
        const actualData = await res.json();
        console.log(actualData.statewise);
        setData(actualData.status);
    }
     
    useEffect(() => {
        getCovidData();
    }, []);

    return (
        <>
        <div className="container-fluid mt-5">
            <div className="main-heading">
            <h1 className="mb-5 text-center">COVID-19 Dashboard</h1>
            </div>
        
            <div className="table-responsive">
                <table className="table table-hover">
                    <thead className="thead-dark">
                        <tr>
                            <th>State</th>
                            <th>Confirmed</th>
                            <th>Recovered</th>
                            <th>Deaths</th>
                            <th>Latest</th> 
                            <th>Active</th> 
                        </tr>
                    </thead>
                    <tbody>
                    {
                        data.map((currElem, ind) => {
                            return (
                        <tr key={ind}>
                            <th>{currElem.state}</th>
                            <td>{currElem.confirmed}</td>
                            <td>{currElem.recovered}</td>
                            <td>{currElem.deaths}</td>
                            <td>{currElem.lastupdatedtime}</td>
                            <td>{currElem.active}</td>
                            
                        </tr>
                            )
                        })
                    }
                     
                    </tbody>
                </table>
            </div>
        </div>
             
        </>
    )
}
export default Statewise;

The error shown on the console is shown below. Please provide way-outs. Due to this error, the page is not rendered and no data can be seen.

Uncaught TypeError: Cannot read properties of undefined (reading 'map') at Statewise (statewise.js:37:1) at renderWithHooks (react-dom.development.js:16305:1) at updateFunctionComponent (react-dom.development.js:19588:1) at beginWork (react-dom.development.js:21601:1) at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1) at invokeGuardedCallback (react-dom.development.js:4277:1) at beginWork$1 (react-dom.development.js:27451:1) at performUnitOfWork (react-dom.development.js:26557:1) at workLoopSync (react-dom.development.js:26466:1)

I tried rewriting the names of API but that did not work. I did not get a solution. I tried to do the mapping process again but it shows the same error.

reactjs javascript
1 Answers

Cannot read property of undefined (reading 'map')

I know you're new, but be sure to learn this as you're getting used to the language's errors. Error says you can't read properties of undefined, which means they're trying to access properties of an object, where the object is undefined. Moreover, reading 'map' helps you know which object is it reading. That last message should indicate that it is reading map property from an undefined object, if you search in your code there is data.map and data seems to be undefined; make sure to validate it before calling map function if it can be possibly null or undefined or even not an array.

A simple data && data.map(...) would do it as it validates if the data is defined before calling map.

user_193387480
Related