CODEWITHSUNDEEP
htmlnode.jsreactjsbootstrap-4reactstrap
vishnu
vishnu

Reputation: 2948

React JS use bootstrap carousel multiple times in a page with reactstrap

I am struggled with using bootstrap carousel multiple times in a page.

I have tried lot with copy as a new item, but its shows error all time.

https://reactstrap.github.io/components/carousel/

<CarouselItem
  onExiting={() => setAnimating(true)}
  onExited={() => setAnimating(false)}
  key={item.src}
>
  <img src={item.src} alt={item.altText} />
  <CarouselCaption captionText={item.caption} captionHeader={item.caption} />
</CarouselItem>

..

<CarouselItem
  onExiting={() => setAnimating(true)}
  onExited={() => setAnimating(false)}
  key={item2.src}
>
  <img src={item2.src} alt={item2.altText} />
  <CarouselCaption captionText={item2.caption} captionHeader={item2.caption} />
</CarouselItem>

Is it need to copy the entire things again?

Sandbox: https://codesandbox.io/s/zealous-wilbur-yeonm?file=/src/App.js

Upvotes: 2

Views: 2958

Answers (1)

imgnx
imgnx

Reputation: 789

You just copy the Carousel component along with the variables and event handlers like so: https://codesandbox.io/s/sweet-ellis-43cbz?file=/src/App.js

A CarouselItem is an image. The entire carousel itself is the Carousel component.

If you need the carousels to work independently, you should create separate variables and handlers for each carousel.

Upvotes: 2

Related Questions