Estoy tratando de crear una tienda virtual y quiero que cada fila de productos tenga cuatro artículos en una pantalla grande, tres en medio y dos en olor.

Mi problema es que no puedo encontrar una manera de hacer que cada cuatro elementos que repita la lista de elementos se cree una nueva fila. (Obtengo los datos de una API que creé con Flask , la parte de obtención de datos funciona).

Aquí está mi código:

 import React, { useState, useEffect } from "react"; import Container from 'react-bootstrap/Container'; import Row from 'react-bootstrap/Row'; import Col from 'react-bootstrap/Col'; function ShopItems () { const [items, setItems] = useState([]); useEffect(() => { fetch('/api/items').then(res => res.json()).then(data => { setItems(data.items); }); }, []); return( <Container fluid> <Row xs={6} md={4} lg={3}> { items.map((item) => ( <Col key={item.id}>{item.name}</Col>)) } </Row> </Container> ) } export default ShopItems;