Reactstrap — Carousels and Collapse

Photo by Fermin Rodriguez Penelas on Unsplash

Reactstrap is a version Bootstrap made for React.

It’s a set of React components that have Boostrap styles.

In this article, we’ll look at how to add carousels and collapse components with Reactstrap.

Carousel Using a Tag and Class Name

We can change the tag and the class name that’s rendered in a carousel item.

For example, we can write:

import React from "react";
import {
  Carousel,
  CarouselItem,
  CarouselControl,
  CarouselIndicators,
  CarouselCaption
} from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";
const items = [
  {
    id: 1,
    altText: "Slide 1",
    caption: "Slide 1"
  },
  {
    id: 2,
    altText: "Slide 2",
    caption: "Slide 2"
  },
  {
    id: 3,
    altText: "Slide 3",
    caption: "Slide 3"
  }
];
export default function App() {
  const [activeIndex, setActiveIndex] = React.useState(0);
  const [animating, setAnimating] = React.useState(false);
  const next = () => {
    if (animating) return;
    const nextIndex = activeIndex === items.length - 1 ? 0 : activeIndex + 1;
    setActiveIndex(nextIndex);
  };
const previous = () => {
    if (animating) return;
    const nextIndex = activeIndex…