React/Javascript - Render a List of Values Based On Same Object Keys Within an Array of Objects

Question

I have an array of objects that looks like this:

const arr = [
{name: "Bill", email: "[email protected]"},
{name: "Suzy", email: "[email protected]"},
{name: "Jill", email: "[email protected]"},
]

I would like to return each value in an <li>. One list for names, one list for emails. Like this:

return (
  <>
    <div className="names">
      <ul>
        {arr.forEach((item) => {
          return <li>item.name</li>;
        })}
      </ul>
    </div>

    <div className="emails">
      <ul>
        {arr.forEach((item) => {
          return <li>item.email</li>;
        })}
      </ul>
    </div>
  </>
);

so that it looks like this:

- Bill
- Suzy 
- Jill

- [email protected]
- [email protected]
- [email protected]

But, of course what I am doing does not look like this, which is why I am asking this question. What can I do with my array of objects to generate the desired list layout? Thanks.

une map instead of forEach and you should be good to go! — Emile Bergeron
– Emile Bergeron, Commented Apr 15, 2021 at 20:28
Does this answer your question? JavaScript: Difference between .forEach() and .map() — Emile Bergeron
– Emile Bergeron, Commented Apr 15, 2021 at 20:28

Tamas Szoke · Accepted Answer · 2021-04-15 20:49:10Z

1

You should use array.map in JSX, with your code:

{
  arr.map((item, index) => (
    <li key={index}>{item.email}</li> 
  ))
}

edited Apr 15, 2021 at 20:49

answered Apr 15, 2021 at 20:29

Tamas Szoke

5,5524 gold badges29 silver badges43 bronze badges

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

Comments

Ilia Talebzadeh · Accepted Answer · 2021-04-15 21:42:10Z

you can do it like this:

import React, { useState } from 'react';

const Component=()=> {

  const [data, setData] = useState({
    arr = [
      {name: "Bill", email: "[email protected]"},
      {name: "Suzy", email: "[email protected]"},
      {name: "Jill", email: "[email protected]"},
    ]
  })

  return (
    <>
      <div className="names">
        <ul>
          //this map will render all the names inside arr array one by one inside an li
          {data.arr.map((item, index) => (
            <li key={index}>{item.name}</li> 
          ))
          }
        </ul>
      </div>

      <div className="emails">
        //this map will render all the emails inside arr array one by one inside an li
        {data.arr.map((item, index) => (
          <li key={index}>{item.email}</li> 
        ))  
        }
      </div>
    </>
  );
}

Collectives™ on Stack Overflow

React/Javascript - Render a List of Values Based On Same Object Keys Within an Array of Objects

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related