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
  }
]});

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
  }
]});

• javascript
• html
• reactjs

Share Improve this question Follow edited Nov 26, 2018 at 9:22 Roy Scheffers 3,9081111 gold badges3333 silver badges3636 bronze badges asked May 7, 2018 at 17:16 Karam HajKaram Haj 1,26022 gold badges1111 silver badges2020 bronze badges 2

• 1 {this.props.users.name} is {this.props.users.age} years old. should be {this.props.user.name} is {this.props.user.age} years old. – Suthan Bala Commented May 7, 2018 at 17:19
• You're passing user, not users, to the UserItem ponent. – Lennholm Commented May 7, 2018 at 17:21

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

The issue is your data not ing 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>
    );
  }
}

You pass a user prop:

<UserItem key={user.id} user={user} />

But you try to access it as users

<li className="UserLI">
    {this.props.users.name} is {this.props.users.age} years old.
</li>

It's a typo. Fix:

<li className="UserLI">
    {this.props.user.name} is {this.props.user.age} years old.
</li>

You need to access name and age from this.props.user and not this.props.users, since you are passing the data as prop user

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