I am trying to map mydata from the database but i am getting this error. TypeError: Cannot read property 'map' of undefined

Question

I am trying to map my data from the database but I am getting this error. FYI my API is working I checked it on postman

import React from "react";

export default class Dashboard extends React.Component {
state = {
people: [],
};

async componentDidMount() {
const url = "http://localhost:5000/dashboard/getuser";
const response = await fetch(url);
const data = await response.json();
console.log(data);
this.setState({ people: data.results });
}

render() {
//const peopleJSX = [];

//this.state.people.forEach((person) => {
//peopleJSX.push(
//<div key={person.id}>
//<div>{person.firstname}</div>
//<div>{person.lasttname}</div>
//</div>
//);
//});

return (
  <div>
    {this.state.people.map((person) => (
      <div key={person.id}>
        <div>{person.firstname}</div>
        <div>{person.lasttname}</div>
      </div>
    ))}
  </div>
 );
 }
 }

This is the error that I am getting back: TypeError: Cannot read property 'map' of undefined

Answer 1

probably because your data is not ready yet when it's rendering

 <div>
{this.state.people.length > 0 && this.state.people.map((person) => (
  <div key={person.id}>
    <div>{person.firstname}</div>
    <div>{person.lasttname}</div>
  </div>
))}

Answer 2

Ryan Adhi's answer is probably what you are looking for, also you could make const inside render ie const people = this.state.people; which in my experience does better job than calling state inside return

Answer 3

In your case, it may be two possibilities because the error "Cannot read property 'map' of undefined" means that the object your are trying to map is not an array.

That means it is either:

• The result fetched from the endpoint is returning an undefined value.

• The property "people" inside the State doesn't exist.

The latter is probably not the case, since your declarations seems correct, so what I recommend is checking the console.log(data.results) and seeing if it is not undefined.

You do not need to check the length of the object if you can assure it will always be an array. Even with 0 length, map will work properly (and do nothing, obviously). If you can't assure it will always be an array (maybe it will be null at some point, then do this:

render () {

  return (
    <div>
      {
       this.state.people && this.state.people.map(person => (
         <div key={person.id}>
           <div>{person.firstname}</div>
           <div>{person.lasttname}</div>
          </div>
        ))
      }
    </div>
  );

}

This will short circuit if this.state.people is falsey (null, false, undefined, 0, etc...)

But again, I'm betting that data.results is undefined for some reason (maybe the correct property is data. result ? I don't know...)