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

user_6191987 0
Viewed 1918

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

reactstrap bootstrap-4 reactjs node.js html
1 Answers

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.

user_50572780
Related