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:
JavaScript
x
29
29
1
import React, { useState, useEffect } from "react";
2
import Container from 'react-bootstrap/Container';
3
import Row from 'react-bootstrap/Row';
4
import Col from 'react-bootstrap/Col';
5
6
7
function ShopItems () {
8
const [items, setItems] = useState([]);
9
10
useEffect(() => {
11
fetch('/api/items').then(res => res.json()).then(data => {
12
setItems(data.items);
13
});
14
}, []);
15
16
return(
17
<Container fluid>
18
<Row xs={6} md={4} lg={3}>
19
{
20
items.map((item) => (
21
<Col key={item.id}>{item.name}</Col>))
22
}
23
</Row>
24
</Container>
25
)
26
}
27
28
export default ShopItems;
29
Advertisement
Answer
You are using props incorrectly.
JavaScript
1
6
1
<Container fluid>
2
<Row>
3
<Col xs={6} md={4} lg={3}></Col>
4
</Row>
5
</Container>
6