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.

Your users variable is assigned an array that looks more like an object... — Code-Apprentice
– Code-Apprentice, Commented May 8, 2018 at 19:03

madox2 · Accepted Answer · 2018-05-08 19:06:51Z

5

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.

edited May 8, 2018 at 19:06

answered May 8, 2018 at 19:02

madox2

52.2k21 gold badges106 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nishant Dixit · Accepted Answer · 2018-05-08 19:08:12Z

1

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

answered May 8, 2018 at 19:08

Nishant Dixit

5,5125 gold badges22 silver badges32 bronze badges

Comments

Ethan Yoder · Accepted Answer · 2018-05-08 19:03:10Z

0

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.

answered May 8, 2018 at 19:03

Ethan Yoder

12 bronze badges

Comments

Code-Apprentice · Accepted Answer · 2018-05-08 19:08:29Z

0

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}
  />),
);

answered May 8, 2018 at 19:08

Code-Apprentice

84k26 gold badges162 silver badges289 bronze badges

Comments

Michael De La Cruz · Accepted Answer · 2018-05-08 19:32:03Z

0

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

answered May 8, 2018 at 19:32

Michael De La Cruz

492 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related