I am faced with a challenge of handling an array of images, among other properties, and I aim to achieve the following outcome:
https://i.sstatic.net/BYajY.png
As the images reach the end of the container (which fits 4 images on desktops and adjusts for smaller screens), a new div should be created to contain the overflow.
If I were working with static data, my approach would look something like this:
<div>
<div className="d-flex products-container justify-content-between mt-5">
<div className="border">
<img src={require('../../assets/images/Products/molde.png')} alt="Product" />
</div>
<div className="border">
<img src={require('../../assets/images/Products/molde.png')} alt="Product" />
</div>
<div className="border">
<img src={require('../../assets/images/Products/molde.png')} alt="Product" />
</div>
<div className="border">
<img src={require('../../assets/images/Products/molde.png')} alt="Product" />
</div>
</div>
<div className="d-flex products-container justify-content-between mt-5">
<div className="border">
<img src={require('../../assets/images/Products/molde.png')} alt="Product" />
</div>
<div className="border">
<img src={require('../../assets/images/Products/molde.png')} alt="Product" />
</div>
<div className="border">
<img src={require('../../assets/images/Products/molde.png')} alt="Product" />
</div>
<div className="border">
<img src={require('../../assets/images/Products/molde.png')} alt="Product" />
</div>
</div>
</div>
However, since the data is fetched dynamically from an API and generated through a loop, the result differs:
props.products.map(product => {
return <div className="border">
<img src={product.img} alt="Product" />
</div>
})
Due to this dynamic nature, I encounter the following output:
https://i.sstatic.net/N9vKN.png
I have experimented with using conditional statements and the index value to control the behavior, but haven't been successful. Any suggestions on how to solve this issue?