Skip to content

Create a new row every three columns

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 => {
    }, []);

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

export default ShopItems;



You are using props incorrectly.

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