0
173
ViewsHow to add data dynamically to the grid in React js
I want to be able to add images to a grid in sets of 3 but instead it is creating 3 sets of each image This is my code
const data = [
{
image:
"https://d25u15mvjkult8.cloudfront.net/videos/7265406/images/500/dOlh05avp978ye6iGOid.jpg",
id: 1,
},
{
image:
"https://d25u15mvjkult8.cloudfront.net/videos/7265203/images/500/955tjRfCGzpQyNZM3Kiz.jpg",
id: 2,
},
{
image:
"https://d25u15mvjkult8.cloudfront.net/videos/7261533/images/500/PBHl35kwCbsoO27St6tP.jpg",
id: 3,
},
];
{data.map((item, index) => {
return (
<Col xl={12}>
<Row>
<Col xl={6}>
<img
src={item.image}
alt="First slide"
width={"100%"}
height={600}
/>
</Col>
<Col xl={6}>
<img src={item.image} width={"100%"} height={300} />
<img src={item.image} width={"100%"} height={300} />
</Col>
</Row>
</Col>
);
})}
This is my output 
This is the desired result
And if there are more than 3 images it should automatically create a row of images with similar structure.
·
Juan Pablo Isaza
1 answers
Answer question0
{data.map((item, index) => {
return (
<Col xl={12}>
<Row>
{index % 2 === 0 && <Col xl={6}>
<img
src={item.image}
alt="First slide"
width={"100%"}
height={600}
/>
</Col>}
{index % 2 !== 0 && <Col xl={6}>
<img
src={item.image}
alt="First slide"
width={"100%"}
height={600}
/>
</Col>}
</Row>
</Col>
);
})}
Basically, you are doing it the correct way but you are looping all the items 3 times without condition, so it shows each image three times,
In the above solution, I am looping through data and Col is taking 6 so It would be adjusted according to the condition.
Please check the responsiveness too.
·
Juan Pablo Isaza
Report
Answer question