How to access nested array object in React

Question

I need to display "details" array from the list array. How do I correctly access it using map() function?

With list.map() I am able to map first level items, but couldn't find a solution for second level of the array.

output can be as below:

1 John, 18, 180

2 Don, 20, 170

3 Mr White, 28, 170

Code:

import React, { Component } from 'react';
 
class App extends Component {
  constructor(props) {
    super(props);
 
    this.state = {
        list: [
        {
        id:1, 
        name:'John', 
        details: [
            {
                id:1, 
                age:18, 
                height:180
            }
        ]
        },

        {
        id:2,
        name:'Don',
        details: [
            {
                id:3, 
                age:20, 
                height:170
            }
        ]
        },
  
        {
        id:3,
        name:'Mr White', 
        details: [
            {
            id:3, 
            age:28, 
            height:190
            }
        ]
        }
        ],
      };
    }
 
  render() {
    return (
      <div>
        <ul>
          {this.state.list.map((item1) => (
            <p key={item1.id}>{item1.id} {item1.name}</p>
          ))}
        </ul>
      </div>
    );
  }
}
 
export default App;

Shmili Breuer · Accepted Answer · 2020-11-13 15:47:26Z

5

You can nest a map inside the first map

{this.state.list.map((item1) => (
    <>
        <p key={item1.id}>{item1.id} {item1.name}</p>
        {item1.details.map(detail => (
            <p>{detail.age} {detail.height}</p>
        ))}
    </>
))}

You need to wrap the element in <></> tags because you can only return one element from a shorthand function.

You may also want to rename item1 to just item as it will represent the current item not only the first one (this is not necessary for the code to work but just a good idea)

edited Nov 13, 2020 at 15:47

answered Nov 13, 2020 at 15:42

Shmili Breuer

4,1652 gold badges21 silver badges28 bronze badges

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

Comments

szczocik · Accepted Answer · 2020-11-13 15:43:04Z

1

You can access the details array inside of the first map and map over it. Something along those lines

https://codesandbox.io/s/funny-brook-p6wkj?file=/src/App.js

answered Nov 13, 2020 at 15:43

szczocik

1,3431 gold badge8 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to access nested array object in React

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related