I have recently started learning React JS and JavaScript. To practice, I am working on a small project where I am facing an issue with creating dynamic rows and columns. My aim is to display data in 4 columns initially and then move to a new row and column for the 5th set of data, continuing this pattern until all the data is displayed.
For reference, you can view the layout here.
Below is the code snippet:
import React, { Component } from 'react';
import './itemslist.css';
import axios from 'axios';
import { Link } from 'react-router-dom';
class ItemsList extends Component{
constructor(props){
super(props);
this.state = {
productList: []
}
}
async componentDidMount(){
const homeAPI = `${window.apiHost}/api/items/`;
await axios.get(homeAPI).then(res => {
this.setState({productList: res.data.result.product_data})
})
}
render(){
// struggling to implement the row and column logic here.
const products = this.state.productList.map((product, i)=>{
return(
<div className="card text-center card_style" key={i} style={{marginBottom: '120px'}}>
<div className="card-header">
{product.name}
</div>
<Link to={`/items/${product.id}`}>
<img className="card-img-top card_image" src={product.image} alt="Card"/>
</Link>
<div className="card-footer text-muted">
<p className="card-text">{product.description}</p>
{product.price}
</div>
</div>
)
})
return(
<div className="item_list_main">
{products}
</div>
)
}
}
export default ItemsList;
Any suggestions on how I can address this challenge?