Mapping through an array within an array of objects

Question

I'm trying to map through an array within an object in an array that I'm already mapping through. I'm a bit stumped and unsure of whether I can actually do this. How would I map through all roles and give them each their own div? Here's an example of what I've tried:

const Projects = [
    {name: 'project one', roles: ['designer', 'developer']},
    {name: 'project two', roles: ['designer', 'developer']}
]

{Projects.map((project, i) => (
    <div>{project.name}</div>
    {project.roles.map((role, i) => (
       <div>{role}</div>
    ))};
))};

Thanks for your help!

Balázs Édes · Accepted Answer · 2022-09-17 14:55:21Z

1

You are on the right track, but you need to return a single JSX element from your transform function. To achieve this, you can wrap your elements in a dom element (like a div), but you can also use Fragment or the <></> shortcut (this allows you to wrap elements without producing unwanted DOM elements):

Projects.map((project) => (
  <>
    <div>{project.name}</div>
    {project.roles.map((role) => (
      <div>{role}</div>
    ))}
  </>
))

In case you just want to iterate over the roles (I don't think this was your goal, but your question kinda sounds like that), you can use flatMap first, where you can return an array in your transform function, and flatMap will create a continuous array from those arrays:

const roles = Projects.flatMap((project) => project.roles)

roles.map((role) => <div>{role}</div>)

Also, don't forget to key your mapped elements!

edited Sep 17, 2022 at 14:55

answered Sep 17, 2022 at 9:10

Balázs Édes

13.9k7 gold badges60 silver badges105 bronze badges

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

1 Comment

connor-online Over a year ago

Hey Balazs, thanks for the reply! My fault on the wrapped div, that's basics. The first solution lumped all the roles together, and the second solution displayed every single role for on each project rather than displaying only the individual roles in each project.

Collectives™ on Stack Overflow

Mapping through an array within an array of objects

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related