How to add data dynamically to the grid in React js

Question

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.

Naveen Gupta · Accepted Answer · 2022-08-22 13:54:32Z

1

{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.

edited Aug 22, 2022 at 13:54

answered Aug 22, 2022 at 13:47

Naveen Gupta

2583 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Himanshu Menon Over a year ago

I tried the code it gave me the 3 images as I wanted but they are not in a row as shown in the desired result instead the images are stacked on top of each other with the with being according to the Col 6

Collectives™ on Stack Overflow

How to add data dynamically to the grid in React js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related