React Flexbox-grid build dynamically - meteor

Question

i hope you can help me with this. I have been trying for quite some time now to creat a grid using flexbox-grid in react dynamically. What i want to achieve for now is to create a new row every 3 elements. I have been playing around with the meteor simple-todos example and i am trying to extend it to learn more about it.
What i have so far in terms of code is:
renderTasks() {
let filteredTasks = this.props.tasks;
return filteredTasks.map((task, i) => {
const currentUserId = this.props.currentUser && this.props.currentUser._id;
const showPrivateButton = task.owner === currentUserId;
if (i % 3 == 0){
console.log("row " + i);
return (
<Row>
<Task
key={task._id}
task={task}
showPrivateButton={showPrivateButton}
/>
</Row>
);
}else{
console.log("col " +i );
return (
<Task
key={task._id}
task={task}
showPrivateButton={showPrivateButton}
/>
);
}
});
}
The problem here is that i cant leave the row open and have to close it immediatly. I assume this should not be to hard to achieve but i googled quite a bit and could not find anything :(

Answer 1

Here's what I would do. First, I would group the tasks according to the row where they should be placed. Then I would have an array of arrays, more or less like this:
[
[ task_1, task_2, task_3 ],
[ task_4, task_5 ]
]
Then I would map over this array to render each row. Finally, to render a row, I would map over that row's tasks and render each task.
Something like this:
renderTasks() {
let filteredTasks = this.props.tasks;
let taskRows = filteredTasks.reduce(function (rows, task, i) {
let rowIndex = Math.floor(i / 3);
if (i % 3 == 0) {
rows[rowIndex] = [task]
} else {
rows[rowIndex].push(task)
}
return rows;
}, []);
return taskRows.map(this.renderTasksRow);
}
renderTasksRow(rowTasks) {
return <Row>{rowTasks.map(this.renderTask)}</Row>;
}
renderTask(task) {
const currentUserId = this.props.currentUser && this.props.currentUser._id;
const showPrivateButton = task.owner === currentUserId;
return (
<Task
key={task._id}
task={task}
showPrivateButton={showPrivateButton}
/>
);
}