reactjs error- TypeError: Cannot read property 'map' of undefined

Question

import React , {useState, useEffect} from 'react'
import styles from './Statewise.css';

const Statewise = () => {

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

    return (
        <div className="bts">
            <div className="container-fluid mt-5">
                <div className="main-heading">
                    <h1 className="mb-5">
                        <span className="font-weight-bold">INDIA COVID 19 TRACKER</span>
                    </h1>
                </div>
                <div className="table-responsive">
                    <table className="table table-hover">
                        <thead className="thead-dark">
                            <tr>
                                <th>States</th>
                                <td>Confirmed</td>
                                <td>recovered</td>
                                <td>death</td>
                                <td>active</td>
                                <td>updated</td>
                            </tr>
                        </thead>
                        <tbody>
                            {
                               data.map((curElem) => {
                                      return(
                                          <tr key={curElem.id}>
                                              <th>{curElem.state}</th>
                                              <td>{curElem.Confirmed}</td>
                                              <td>{curElem.recovered}</td>
                                              <td>{curElem.deaths}</td>
                                              <td>{curElem.active}</td>
                                              <td>{curElem.lastupdatedtime}</td>
                                          </tr>
                                      )
                                })
                            }
                        </tbody>
                        </table>
                </div>
            </div>
        </div>
    )
}
export default Statewise;

Not able to extract values from the api.

I have tried data && data.map(... this is also not working.
I have tried adding the load and error methods but then also the main data from the api id not displayed. please suggest solutions .

Render is working before the async completed. Your data is null at the moment. You need to check if data exist only then map will work e.g. {data && data.length > 0 && data.map((curElem) — Vikash Dhiman
– Vikash Dhiman, Commented May 21, 2021 at 8:56
api.covid19india.org/data.json its the api that have information related to covid cases in Indian states. — Sakshi Arora
– Sakshi Arora, Commented May 21, 2021 at 9:01

Priyank Kachhela · Accepted Answer · 2021-05-21 09:08:47Z

1

Your actualData does not contain Statewise field but it does contain statewise (See difference in s in both fields)

So to solve this just replace Statewise with statewise

const getCData = async () => {
    const res = await fetch('https://api.covid19india.org/data.json');
    const actualData = await res.json();
    setData(actualData.statewise);
}

answered May 21, 2021 at 9:08

Priyank Kachhela

2,64511 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

crg · Accepted Answer · 2021-05-21 09:00:18Z

When you use data in you HTML you can make a conditional statement to be sure that your data are loaded.

For exemple :


     {
                             data ?  data.map((curElem) => {
                                      return(
                                          <tr key={curElem.id}>
                                              <th>{curElem.state}</th>
                                              <td>{curElem.Confirmed}</td>
                                              <td>{curElem.recovered}</td>
                                              <td>{curElem.deaths}</td>
                                              <td>{curElem.active}</td>
                                              <td>{curElem.lastupdatedtime}</td>
                                          </tr>
                                      )
                                      : <p> No data available </p>

                                })
                            }

Collectives™ on Stack Overflow

reactjs error- TypeError: Cannot read property 'map' of undefined

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related