I have created an array mapping that renders the expected output. However, I am facing a challenge where I want the items to go to the next column if their number is divisible by five while keeping the vertical alignment of divs. How can I achieve this without altering the vertical layout?
Below is the code I wrote which displays the list of items vertically without moving to the other side:
renderLogic() {
let items = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14];
return items.map((item) => {
if(item % 5 === 0) {
return (
<div key = {item} style={{float: 'left'}}>
{item}
</div>
);
} else {
return (
<div key = {item}>
{item}
</div>
);
}
});
}
render() {
return (
<div className="sample-container">
{this.renderLogic()}
</div>
);
}
The current output of this code is as follows:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
However, my desired output is:
1 6 11
2 7 12
3 8 13
4 9 14
5 10