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('.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.

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/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.

• javascript
• reactjs

• Did you read the error? Get in the habit of reading errors, don't ignore them. And get in the habit of debugging your code with console.log. – Andy Ray Commented Sep 1, 2022 at 5:38
• what is actualData.status? check if it's a valid array. – science fun Commented Sep 1, 2022 at 5:44
• your api => data.covid19india/data.json seems do not have the status array – HsuTingHuan Commented Sep 1, 2022 at 5:59

1 Answer 1

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.