React - Render a 1D array as a table

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:
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

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

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: