How to render nested array elements in React?

Question

I want to render nested array elements. To render elements I used .map but it is not working for second array.

Using list=[{value: 'One', list:[{value: 'abc', selected: false}, {value: 'efg', selected: false}]}, {value: 'Two', list: [{value: 'psr', selected: false}]}];

   list.map((item, index) => {
        return (
          <div key={index}>
            <ul >{item.value}</ul>
            item.list.map((subitem, i) => {
              return (
                 <ul >{subitem.value}</ul>
              )
            })
          </div>
        )
      })

Am I missing anything here?

Thanks

Do you want to render them in nested lists, or flatten the array? — Tom Fenech
– Tom Fenech, Commented May 3, 2017 at 9:36
I can see your array, what you need to show us is the desired structure of the HTML that you are trying to produce. At the moment, what you have is invalid. — Tom Fenech
– Tom Fenech, Commented May 3, 2017 at 10:06
@TomFenech yes. I don't know how to use .map for nested array — Anusha Nilapu
– Anusha Nilapu, Commented May 3, 2017 at 10:11

Ved · Accepted Answer · 2017-05-03 10:15:49Z

31

Try this. You missed { } before your second map

 list.map((item, index) => {
            return (
              <div key={index}>
                <ul >{item.value}</ul>
               {
                item.list.map((subitem, i) => {
                  return (
                     <ul ><li>{subitem.value}</li></ul>
                  )
                })
               }
              </div>
            )
          }

DEMO: https://jsfiddle.net/jwm6k66c/2611/

edited May 3, 2017 at 10:15

answered May 3, 2017 at 9:39

Ved

12.1k5 gold badges46 silver badges61 bronze badges

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

9 Comments

Tom Fenech Over a year ago

Try adding an explanation to your answer!

Ved Over a year ago

@TomFenech I was in middle of adding

Tom Fenech Over a year ago

Your answer deals with a possible syntax error but fails to take into account the fact that a text node is not a permitted child of a <ul> element.

Anusha Nilapu Over a year ago

Throws error. It says Cannot read property 'map' of undefined. Referd item.list.map

Anusha Nilapu Over a year ago

Okat. Thanks @Ved

|

Collectives™ on Stack Overflow

How to render nested array elements in React?

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related