I am trying to create a virtual shop and I want to make every row of products have four items on a large screen, three in medium, and two in smell.

My problem is that I can’t come up with a way to make it that every four items I iterate the item list a new row will be created. (I am getting the data from an API I created with Flask, the getting the data part works.)

Here is my code:

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;