CODEWITHSUNDEEP
javascriptreactjsarray-map
Yehuda
Yehuda

Reputation: 133

nested array maps not rendering in react return

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.

Upvotes: 0

Views: 263

Answers (2)

Nico_
Nico_

Reputation: 1386

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>
);

Upvotes: 1

learn.boy
learn.boy

Reputation: 23

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

Upvotes: 1

Related Questions