Reactjs: Am having challenges with map() on nested Array

Question

When I use map() to return the names of devices in my database, it only returns the first name.
I am not very confident with JavaScript so this may be a simple issue.

Here's my database:

[{
   "dwelling_id": 1,
   "rooms": [{
       "room_id": 1,
       "room_name": "Living Room",
       "devices": [{
          "id": 1,
          "device_name": "Google Home",
        }]
      },
      {
        "room_id": 2,
        "room_name": "BedRoom",
        "devices": [{
           "id": 2,
           "device_name": "Smart Bulb 1",
        }]
       }...

Here's the code to return both Google Home and Smart Bulb in separate Bootstrap Cards:

{props.house.map(house => {
     return (
        <React.Fragment>
           <Card>
              <Card.Body>
                 <Card.Title>
                   {house.rooms[0].devices[0].device_name}
                 </Card.Title>
              </Card.Body>
           </Card>
        </React.Fragment>
     )}
})}

If I do this:

// If I change this...
{house.rooms[0].devices[0].device_name} 
// to...
{house.rooms[1].devices[0].device_name}

My code only returns just Smart Bulb.
Note that I want to return both Google Home and Smart Bulb in two separate Cards.
Any help would be greatly appreciated, thank you!

this map is for houses (top level array), you need next maps inside for rooms and devices — xadm
– xadm, Commented Apr 8, 2020 at 13:57

Carlos Saiz Orteu · Accepted Answer · 2020-04-08 14:03:11Z

1

You need to do a second and third .map inside our first map in order to return both rooms:

{props.house.map(house => {

     return (
         <React.Fragment>
             <Card>
                 <Card.Body>
                     {
                         house.rooms.map((room) => (
                             room.map((device) => (
                                <Card.Title>{device.device_name}</Card.Title>
                             )
                         )
                      }
                 </Card.Body>
              </Card>
          </React.Fragment>
       )
     }
  })}

answered Apr 8, 2020 at 14:03

Carlos Saiz Orteu

1,8151 gold badge13 silver badges20 bronze badges

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

Comments

HermitCrab · Accepted Answer · 2020-04-08 14:02:34Z

1

You have 2 levels in your array, when you do props.house.map, you only get the first level object: dwelling. If you want to list all the rooms of a dwelling, then you need to make a second map like this:

props.house.map(dwelling => {
  dwelling.map(room => {
    console.log(room.devices[0].device_name);
  }
})

answered Apr 8, 2020 at 14:02

HermitCrab

3,2641 gold badge14 silver badges10 bronze badges

1 Comment

ajnabz Over a year ago

Thank you very much!

Collectives™ on Stack Overflow

Reactjs: Am having challenges with map() on nested Array

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related