How to automatically arrange cards in rows and columns? - reactjs

Question

Im trying to create a interactive user interface in ReactJS, using react-bootstrap. Im using cards and CardGroup. I need a way to automatically arrange the cards in new rows. Something like three cards per row, and if I have more than three, create a new row for the 4th card.
import React, { Component } from 'react';
import {Card,CardGroup} from 'react-bootstrap';
import {Button} from 'react-bootstrap';
const Items = ({items}) => {
return (
<>
<container>
<row>
<CardGroup>
{items.map((item) => (
<Card style={{ width: '18rem' }}>
<Card.Body>
<Card.Title>{item.NOME}</Card.Title>
<Card.Subtitle className="mb-2 text-muted">{item.CATEGORIA}</Card.Subtitle>
<Card.Text>
{item.DESCRICAO}
</Card.Text>
<Card.Link href="#">Card Link</Card.Link>
<Card.Link href="#">Another Link</Card.Link>
</Card.Body>
</Card>
))}
</CardGroup>
</row>
</container>
</>
)
};
export default Items

Answer 1

You could create an array with groups of 3 cards and then iterate over them:
const arr = var x = arr.reduce((item, key, index) => (index % 3 == 0 ? item.push([key]) : item[item.length-1].push(key)) && item, []);
const Items = ({items}) => (
<>
<container>
{arr.map(group => (
<row>
<CardGroup>
{group.map(card => (
<Card style={{ width: '18rem' }}>
<Card.Body>
<Card.Title>{item.NOME}</Card.Title>
<Card.Subtitle className="mb-2 text-muted">{item.CATEGORIA}</Card.Subtitle>
<Card.Text>{item.DESCRICAO}</Card.Text>
<Card.Link href="#">Card Link</Card.Link>
<Card.Link href="#">Another Link</Card.Link>
</Card.Body>
</Card>
))}
</CardGroup>
</row>
))}
</container>
</>
);
I haven't tested this code, but it should work...