How can I render the contents of an array of arrays in React?

Question

I am really surprised I even have to ask this question but I am completely stumped. In Angular I use nested *ngFor but in React I can't figure out how to render a 2d array that's fetched from an API. I have no problem with rendering a flat array. (example below)

The 2D array is to generate separate rows of icons. Perhaps I could use a filter with the row property on each of the icon objects; I would really like to know how to traverse a 2D array.

snipets React works with flat array

{this.state.icons.map((icon) => (
  <li className="icons">
    {icon.type === 'icon' && (
      <a href={icon.targetUri} target="_blank">
          <img
            className="large-icon"
            src={icon.image} />
      </a>
    )}
  </li>
))}

Angular 9

 <div class="col-12">
      <ul       
        runInsideAngular="false"
        *ngFor="let row of rows; let i = index;">
        <li 
          class="icons"
          *ngFor="let icon of row"
...

I was pretty sure too but I couldn't get it to render. I'll try again in the morning. — chris loughnane
– chris loughnane, Commented Sep 13, 2020 at 3:33

Prateek Thapa · Accepted Answer · 2020-09-13 13:14:02Z

1

You could simply nest .map() calls

Here is a working example :- https://stackblitz.com/edit/react-t2hrra

const arrOfArray = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
]

function App() {
  return (
    <div>
      {arrOfArray.map(arr => {
        return arr.map(a => {
          return <p>{a}</p>
        })
      })}
    </div>
  );
}

edited Sep 13, 2020 at 13:14

answered Sep 13, 2020 at 4:06

Prateek Thapa

4,9481 gold badge12 silver badges25 bronze badges

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

3 Comments

chris loughnane Over a year ago

Thank you very much, your snippet proved to me I am doing it the correct way with nested map. There's something wrong in my data although it looks perfectly fine when inspected with chrome components extension. BTW the link isn't working correctly.

chris loughnane Over a year ago

I hardcoded an example of my data and it works perfectly with nested map. So something is failing when I fetch the data, I now think the two dimensional array is not ready by the time the render is fired.

chris loughnane Over a year ago

Thanks for that. I thought I was going mad. I'm an Angular dev testing out React and I like what I see so far. I just need to figure out why my data is bad in the app but hardcoded it's fine. stackblitz.com/edit/react-nested-map-2d-array?file=src/App.js

Collectives™ on Stack Overflow

How can I render the contents of an array of arrays in React?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related