CODEWITHSUNDEEP
reactjstypescriptreact-bootstrap
user1892203
user1892203

Reputation: 509

How do i loop React bootstrap carousel items

Below is my code, I would like to put inside a for loop and based on my item count i would like to create carousel items.

This can be easily achieved in angular by using ngFor but i don't know how to achieve in react.

<Carousel>
  <Carousel.Item>
    <img
      className="d-block w-100"
      src="holder.js/800x400?text=First slide&bg=373940"
      alt="First slide"
    />
    <Carousel.Caption>
      <h3>First slide label</h3>
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </Carousel.Caption>
  </Carousel.Item>
  <Carousel.Item>
    <img
      className="d-block w-100"
      src="holder.js/800x400?text=Second slide&bg=282c34"
      alt="Third slide"
    />

    <Carousel.Caption>
      <h3>Second slide label</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </Carousel.Caption>
  </Carousel.Item>
  <Carousel.Item>
    <img
      className="d-block w-100"
      src="holder.js/800x400?text=Third slide&bg=20232a"
      alt="Third slide"
    />

    <Carousel.Caption>
      <h3>Third slide label</h3>
      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
    </Carousel.Caption>
  </Carousel.Item>
</Carousel>

Upvotes: 3

Views: 2733

Answers (1)

zmag
zmag

Reputation: 8261

LIke *ngFor in Angular, you can do the same thing in React using Array.prototype.map.

Say there's an array named items.

<Carousel>
  {this.items.map(item => (
  <Carousel.Item>
    <img
      className="d-block w-100"
      src={item.src}
      alt={item.alt}
    />
    <Carousel.Caption>
      <h3>{item.captionTitle}</h3>
      <p>{item.caption}</p>
    </Carousel.Caption>
  </Carousel.Item>
  )}
</Carousel>

Upvotes: 3

Related Questions