How to map an array of arrays of arrays with objects in react

Question

I have an array that contains multiple arrays which contain arrays which hold objects. I know right. Sounds confusing. It looks like this

Each Internal Array has two arrays, one in the 0 index and the other in the first index. These in turn also contain objects. Now my problem is how can I map from the top arrays to get to the lowests object to be able to do something like {array.name} in react. This does not work. Nothing gets rendered onto the page

This is how the array looks like. I removed the other two internal arrays to make it look less messy.

 const data = [ [ [ {name: "Michael Norman", house: "9", class: "3B2"} ], [ {name: "Ronald Eyeson", house: "9", class: "3D3"}, {name: "Kingsley Buadi", house: "9", class: "3N"}, {name: "Lommo", house: "9", class: "3H"} ] ] ] console.log(data)

Answer 1

Try to run this code:

 const data = [ [ [ {name: "Michael Norman", house: "9", class: "3B2"} ], [ {name: "Ronald Eyeson", house: "9", class: "3D3"}, {name: "Kingsley Buadi", house: "9", class: "3N"}, {name: "Lommo", house: "9", class: "3H"} ] ], [ [ {name: "Michael Norman1", house: "9", class: "3B2"} ], [ {name: "Ronald Eyeson1", house: "9", class: "3D3"}, {name: "Kingsley Buadi1", house: "9", class: "3N"}, {name: "Lommo1", house: "9", class: "3H"} ] ] ];

 <div> {Object.keys(data).map((key) => { return( <div key={key}> {data[key].map((dataItem) => { return( <div> {Object.keys(dataItem).map((innerDataItem) => { return ( <h1>{dataItem[innerDataItem].name} </h1> ); }) } </div> ) })} </div> ) })} </div>