How to add data dynamically to the grid in React js

user_19198925 0
Viewed 54

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 enter image description here

This is the desired result

enter image description here

And if there are more than 3 images it should automatically create a row of images with similar structure.

reactjs html javascript
1 Answers
{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.

user_77856560
Related