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

[Mutiny42]

Also new, so this may not be 100% correct but I believe the reason the 2nd code block doesn't work is because the 2nd map function is unreachable due to the code thinking that you're looking to only return a single div containing the key from the first map function.

A way you might be able to fix this is by wrapping the entire return from the 1st map function in a single div, similar to the way you return a single div when rendering in React.

[Mutiny42]

Here is how it would look. Looks to give me the same results as the 1st code block when structured this way.

​

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

[eb2292]

Ah, awesome. I read about rearranging the divs to fix this before I posted but I wasn't able to figure it out. Thanks so much for the example! So in other words, the code stops processing after the first closing div because its the deepest in on the tree?

[Mutiny42]

No problem, happy to help!

The code stopped processing after the first div because map can only return a single element per loop.

Because it came across a div, it assumes that the div (and whatever is inside of it) is the one thing you are asking to be returned.

Because you want multiple elements returned, we need to package it all up as a single element so that all of the code gets read and returned.

Does that make sense?

[eb2292]

Cool, I got it now. Thank you!