How to render nested array elements in React?

array.prototype.map, reactjs, rendering

Solution

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/

Problem

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

Original source