arrange elements in vertical order - reactjs

Question

Found some answers, but all are implemented on multi dimension array.
I have a scenario, where I need to render the array elements in the vertical order.
Expected Behavior:
Get the length of given array and split the array into four columns.
Each column should have max of 6 items in it.
Expected Output:
1 7 13 19
2 8 14 20
3 9 15 21
4 10 16 22
5 11 17 23
6 12 18 24
Sample Array:
{
"items": [
{
"val": "1"
},
{
"val": "2"
},
{
"val": "3"
},
{
"val": "4"
},
{
"val": "5"
},
{
"val": "6"
},
{
"val": "7"
},
{
"val": "8"
},
{
"val": "9"
}
]
}
This is what I tried, not able to achieve the expected output.
createList(list, index) {
const max = Math.max.apply(null, list.items.map((x, i) => (i + 1) / 4));
return Array.from({ length: max }, function(item, index) {
return <div className="row" key={index}>
{list.items.slice(0, max).map((x, i) => (
<div className="col-3" key={i}>
{x.val}
</div>
))}
</div>;
});
}

Answer 1

There's probably tons of way to do this but i came up with this solution using lodash:
renderColumn(row) {
// map through columns
const columns = row.map(column => (
<td key={column}>{column}</td>
));
return columns;
}
render() {
// Create an array of length 50
let items = [];
for (let i=0; i<50; i++) {
items.push({val:i});
}
/** Transform the array in something like this:
* items: [
* [1, 7, 13, 19],
* [2, 8, 14, 20],
* [3, 9, 15, 21],
* [4, 10, 16, 22],
* [5, 11, 17, 23],
* [6, 12, 18, 24],
* ]
*/
// Get only 24 first items as it is a 4x6 matrix
items = items.slice(0, 24);
const res = _.reduce(items, (result, value, key) => {
const index = key % 6;
(result[index] || (result[index] = [])).push(value.val);
return result;
}, {});
// map through the rows of the arrays
const rows = _.map(res, row => {
const column = this.renderColumn(row);
return <tr>{column}</tr>;
});
return (
<table>
<tbody>
{rows}
</tbody>
</table>
);
}
I hope you get the point :)
Here is a sandbox with the code