nested array maps not rendering in react return

Question

I have a react return like so:

return (
    <div className="App">
      {data && (
        <div>
            {data.map((d) => {
              return (
                <div key={d.id}>
                  <div>{d.string}</div>
                  <div> {d.array.map((el) => {
                        <div>{el}</div>
                  })}
                  </div>
                </div>
              );
        </div>
      )}
    </div>
  );

Each {el} doesn't render but the array exists, if I try and render {d.array[0]} the first index of the array is rendered, so I'm not the issue. I don't get an error and nothing breaks. Is it a react issue or a javascript issue, or is my syntax wrong.

Yehuda · Accepted Answer · 2023-02-02 19:17:45Z

1

You need to add a key to each children of your second map so React knows each one is different:

return (
<div className="App">
  {data && (
    <div>
        {data.map((d) => {
          return (
            <div key={d.id}>
              <div>{d.string}</div>
              <div> {d.array.map((el, index) => {
                    return <div key={index}>{el}</div>
              })}
              </div>
            </div>
          );
    </div>
  )}
</div>
);

edited Feb 2, 2023 at 19:17

Yehuda

1333 silver badges23 bronze badges

answered Feb 2, 2023 at 17:44

Nico_

1,39617 silver badges32 bronze badges

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

1 Comment

Yehuda Over a year ago

still renders nothing

learn.boy · Accepted Answer · 2023-02-02 18:31:22Z

1

before the "=>" of second map, will have use "()" and not "{}", because all that be in {is js}, and in (jsx).

answered Feb 2, 2023 at 18:31

learn.boy

332 silver badges5 bronze badges

1 Comment

Yehuda Over a year ago

can you explain that more?

Collectives™ on Stack Overflow

nested array maps not rendering in react return

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related