score:5

Accepted answer

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.

score: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.

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

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

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

Related Query

More Query from same tag