Property 'map' of undefined in React

Question

I'm learning a react course online. When I try to display the list of items from an array using map to display in a child component , I keep getting "cannot read property map of undefined.

Error is thrown while fetching data from users

import React, { Component } from "react";
import ReactDOM from "react-dom";


let userList = [
  { name: "John", age: 24, place: "India" },
  { name: "Henry", age: 24, place: "India" },
  { name: "Ulrich", age: 24, place: "India" }
];

const AppChild = ({ name, age, place, Graduated }) => {
  return (
    <section>
      <p>name: {name}</p>
      <p>age: {age}</p>
      <p>place: {place}</p>
      {/* access the value via props */}
      <p>Graduated: {Graduated ? "yes!" : "no!"}</p>
    </section>
  );
};


export default class App extends Component {
    
  state = {
    userExists: true,
    isGraduated: true,
    loading: true,
  }; 


  toggleStatus = () => {
    this.setState(prevState => ({
      userExists: !prevState.userExists // value : false
    }));
  };

  render() {
    const { users } = this.props; 
    return (
      <div>
        <h2>Profile</h2>
        <h4>
          Profile Status is {this.state.userExists ? "Updated" : "Outdated"}
          <br />
          <button onClick={this.toggleStatus}>Check Status</button>
        </h4>
        {users.map(user => (
          
          <AppChild
            name={user.name}
            age={user.age}
            place={user.place}
            Graduated={this.state.isGraduated} // passing state to child component
          />
        ))}
      </div>
    );
  }
}

ReactDOM.render(<App users={userList} />, document.getElementById("root"));

Answer 1

If you try to log users after following line of code

const { users } = this.props; 

you'll see users is undefined.

Error message "cannot read property map of undefined" says the same thing, you can not apply map helper on an undefined variable. The map works with arrays

Answer 2

Below is the correct code. In the previous code I was trying to render <App/> in both index.js and App.js. Thanks everyone for helping me out

=>index.js

import React from "react"
import ReactDOM from "react-dom"
import App from "./App"

let userList = [
    { name: "John", age: 24, place: "India" },
    { name: "Henry", age: 24, place: "India" },
    { name: "Ulrich", age: 24, place: "India" }
  ];

  
ReactDOM.render(<App users={userList} />, document.getElementById("root"));

=> App.js

import React, { Component } from "react";

// child component
const AppChild = ({ name, age, place, Graduated }) => {
  return (
    <section>
      <p>name: {name}</p>
      <p>age: {age}</p>
      <p>place: {place}</p>
      {/* access the value via props */}
      <p>Graduated: {Graduated ? "yes!" : "no!"}</p>
    </section>
  );
};

// parent component
export default class App extends Component {
    
  state = {
    userExists: true,
    isGraduated: true,
    loading: true,
  }; 

  toggleStatus = () => {
    this.setState(prevState => ({
      userExists: !prevState.userExists // value : false
    }));
  };

  render() {
    const { users } = this.props;
    return (
      <div>
        <h2>Profile</h2>
        <h4>
          Profile Status is {this.state.userExists ? "Updated" : "Outdated"}
          <br />
          <button onClick={this.toggleStatus}>Check Status</button>
        </h4>
         {users.map((user) => {
          return(
            <AppChild
              name={user.name}
              age={user.age}
              place={user.place}
              Graduated={this.state.isGraduated} // passing state to child component
            />
          )})}
      </div>
    );
  }
}

Answer 3

To figure out the problem, we follow the bouncing ball. From the error message, I guess that the problem occurs on the line

        {users.map(user => (

(You can confirm this from the stack trace given with the error message.)

The error tells you that users is undefined. So we look at the declaration for users:

    const { users } = this.props; 

Ok, so it is really this.props.users. So we look where this is passed in:

ReactDOM.render(<App users={userList} />, document.getElementById("root"));

Here you are passing the value of userList to a prop named users. However, in the code you show here, there is no variable named userList. This is as far as we can go with the information you have given. You need to find where this variable is declared and initialized to continue solving the problem.