Crate a new row every 3 col-CodePudding

I am trying to create a virtual shop and I want to make every row of products have 4 items on a large screen, 3 in medium, and 2 in smell. my problem is that I cant come up with a way to make it that every 4 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;

CodePudding user response：

You are using props incorrectly.

<Container fluid>
  <Row>
    <Col xs={6} md={4} lg={3}></Col>
  </Row>
</Container>