React - Render a 1D array as a table

1

Does anyone know an elegant way to render a 1-dimentional array as a table in react? For example this array:

let arr = [
1, 0, 0, 0, 0,
0, 0, 0, 1, 1,
0, 0, 1, 0, 0,
1, 1, 1, 0, 0,
0, 0, 1, 1, 1
]

The desired output would look like this:
table
Using a 2- dimensional array is fairly straight-forward, having the inner array map to a table row and then smaller components within it render as cells. I am attempting to wrap my head around how this could be accomplished though without the extra dimension. Any help would be appreciated. Thank you.

1 Like
2

Haiiiyo! Here is a hint:

the width number of cells in a row is fixed

And therefore:

You can always just use a loop to return at the end of a row.

Just out of curiosity, may I ask what your use case is? I find 1D arrays a bit inconvenient to work with because it’s less intuitive to start an debugging can be a nightmare.

I hope that helps. :slight_smile:

1 Like
3

Perhaps if you declare your table dimensions and use them to render rows using Array.slice() on the array. If you transpose your start and end position using the dimensions with a counter, you could keep the array 1D.
lol I can think of a few other ways but they always end up converting the 1D into a 2D at some point. This is a neat question. :slight_smile: