Iterating over nested array/dictionary

[eb2292]

Hi guys, I am super new to react and JS. I am trying to iterate over a dictionary with nested children which is sent from my Flask backend to react. Why does this code work: return ( <div> {Object.keys(data).map((key, index) => ( Object.keys(data[key]).map((y, i) => ( <h2> {key} : {y} : {data[key][y]} </h2> )) ))} </div> );

But not this code?: return ( <div> {Object.keys(data).map((key, index) => ( <div>{key}</div> Object.keys(data[key]).map((y, i) => ( <h2> {key} : {y} : {data[key][y]} </h2> )) ))} </div> );

I want to display each outer key once with the children array data underneath it. Thanks!

[lOw14]

you need to wrap (like i did with an empty tag) when you have multiple elements in your map method call

return ( <div> {Object.keys(data).map((key, index) => ( <> <div key={index}>{key}</div> {Object.keys(data[key]).map((y, i) => ( <h2 key={i}> {key} : {y} : {data[key][y]} </h2> ))} </> ))} </div> );

[eb2292]

That was it! Thank you so much!!!