REACT: TypeError: Cannot read property 'name' of undefined

Question

I'm new to React, I just followed a tutorial step by step and got other results. The error message I'm getting is:

Cannot read property 'name' of undefined.

The question is why is name undefined? I added objects that I need to show on a page a list.

Here is my code where I fall:

import React, { Component } from "react";

class UserItem extends Component {
  render() {
    return (
      <li className="UserLI">
        {this.props.users.name} is {this.props.users.age} years old.
      </li>
    );
  }
}
export default UserItem;

And here is where I call the above code:

class Users extends Component {
  render() {
    let userItem;

    if (this.props.users) {
      userItem = this.props.users.map(user => {
        console.log(user);
        return <UserItem key={user.id} user={user} />;
      });
    }
    return <div classNname="Users">{userItem}</div>;
  }
}

my JSON data

this.setState({users:[
  {
    id:0,
    name: "karam",
    age:22
  },
  {
    id:1,
    name: "ayoub",
    age:23
  },
  {
    id:2,
    name: "tarek",
    age:21
  }
]});

Solution

The issue is your data not coming at the moment the code get render. you can fix that issue by adding basic validation.

class UserItem extends Component {
  render() {
    return (
      <li className="UserLI">
        {this.props.users && this.props.users.name} is {this.props.users && this.props.users.age} years old.
      </li>
    );
  }
}

Comments

[Suthan Bala]

{this.props.users.name} is {this.props.users.age} years old. should be {this.props.user.name} is {this.props.user.age} years old.

[Lennholm]

You're passing user, not users, to the UserItem component.