How to loop through properties of objects inside of an array within a React component?

Question

Here is my Parent component's render function:

  render() {
    const users = [
      'tom': {
        phone: '123',
        email: 'hotmail'
      },
      'rob': {
        phone: '321',
        email: 'yahoo'
      },
      'bob': {
        phone: '333',
        email: 'gmail'
      },
    ];

    const list = users.map((user) =>
      (<User
        name={user}
        phone={users.phone}
        email={users.email}
      />),
    );

    return <ul>{list}</ul>;
  }

The output shows up like this:

And here is the Child component's render function:

  render() {
    const {
      name,
      phone,
      email,
    } = this.props;

    const info = [name, phone, email];

    const item = info.map((index) => (
      <li key={index}>
        { index }
      </li>
    ));

    return item;
  }

How can I get it to show with the phone numbers and emails? Not sure what I'm doing incorrectly. Thanks.

Answer 1

At first this is not valid javascript:

const users = [
  'tom': {
    phone: '123',
    email: 'hotmail'
  },
  // ...
];

You should either define an array or an object. Let's say your users is an object literal:

const users = {
  'tom': {
    phone: '123',
    email: 'hotmail'
  },
  // ...
};

Then you can iterate over entries of the object:

const list = Object.entries(users).map(([name, info]) =>
  (<User
    name={name}
    phone={info.phone}
    email={info.email}
  />)
);

However Object.entries() is not supported in all browsers, check if it works in your environment.

Answer 2

First thing is that users is not a valid array If you want key value pair in main scope then use Object ({})

 render() {
        const users = {
          'tom': {
            phone: '123',
            email: 'hotmail'
          },
          'rob': {
            phone: '321',
            email: 'yahoo'
          },
          'bob': {
            phone: '333',
            email: 'gmail'
          },
        };

        const list = Object.keys(users).map((user) =>
          (<User
            name={user}
            phone={users[user].phone}
            email={users[user].email}
          />),
        );

        return <ul>{list}</ul>;
      }

Answer 3

You need to be referring to "user" instead of "users" inside of the Parent component's map function. The purpose of the "user" variable is to represent the current instance of each element in the array. So the map function should look like:

const list = users.map((user) =>
  (<User
    name={user}
    phone={user.phone}
    email={user.email}
  />),
);

instead.

Answer 4

One solution is to change your "list" to an actual list:

const users = [
  {
    name: 'tom',
    phone: '123',
    email: 'hotmail'
  },
  {
    name: 'rob,
    phone: '321',
    email: 'yahoo'
  },
  {
    name: 'bob',
    phone: '333',
    email: 'gmail'
  },
];

Now user user.name instead of user .

Alternatively, create an object keyed by the names of each user:

const users = {
  'tom': {
    phone: '123',
    email: 'hotmail'
  },
  'rob': {
    phone: '321',
    email: 'yahoo'
  },
  'bob': {
    phone: '333',
    email: 'gmail'
  },
};

Then map over the keys:

const list = Object.keys(users).map((user) =>
  (<User
    name={user}
    phone={users[user].phone}
    email={users[user].email}
  />),
);

Answer 5

Your const users should be modified to map through them.

 const users = [
            {
            name: 'tom',
            phone: '123',
            email: 'hotmail',
          },
          {
            name:'rob',
            phone: '321',
            email: 'yahoo'
          },
          {
            name: 'bob',
            phone: '333',
            email: 'gmail'
          },
    ];
    const list = users.map((usr =>
      (<User
        name={usr.name}
        phone={usr.phone}
        email={usr.email}
      />),
    );

    return <ul>{list}</ul>;
  }