bootstrap carousel does not switch between slides when used in reactjs

Question

I have the following reactjs component which tries to load a bootstrap carousel. But the carousel navigations does not work and only the first image is shown. I have verified that the second and third images exist (by making them the first image) in the correct path too.

Is there something we need to add to use bootstrap carousel on reactjs, as carousel is a plugin in bootstrap ? Rest of the bootstrap classes (like btn, label, etc.) work flawless in the rest of the react components.

The source:

import React from 'react'

class LandingPage extends React.Component {
  render() {
    return (
      <div className="container">
        <div id="myCarousel" className="carousel slide" data-ride="carousel">
          <ol className="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" className="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
          </ol>

          <div className="carousel-inner">

            <div className="item active">
              <img src={require("../images/pexels-photo-112640.jpeg")} alt="Chicago" className="landing-page-image" />

              <div className="carousel-caption">
                <h3>Chicago</h3>
                <p>Thank you, Chicago!</p>
              </div>
            </div>

            <div className="item">
              <img src={require("../images/pexels-photo-110473.jpeg")} alt="Los Angeles" className="landing-page-image" />

              <div className="carousel-caption">
                <h3>Los Angeles</h3>
                <p>LA is always so much fun!</p>
              </div>
            </div>

            <div className="item">
              <img src={require("../images/pexels-photo.jpg")} alt="New York" className="landing-page-image" />
              <div className="carousel-caption">
                <h3>New York</h3>
                <p>We love the Big Apple!</p>
              </div>
            </div>

          </div>

          <a className="left carousel-control" href="#myCarousel" data-slide="prev">
            <span className="glyphicon glyphicon-chevron-left"></span>
            <span className="sr-only">Previous</span>
          </a>
          <a className="right carousel-control" href="#myCarousel" data-slide="next">
            <span className="glyphicon glyphicon-chevron-right"></span>
            <span className="sr-only">Next</span>
          </a>
        </div>
      </div>
    );
  }
}

export default LandingPage

The import for bootstrap in my index.js is, as follows:

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/css/bootstrap-theme.css'

The tutorial where the carousel code is copied from (and 'class' changed to 'className') is available at: https://www.w3schools.com/bootstrap/bootstrap_carousel.asp

Answer 1

the problem arises because Bootstrap has a Javascript component as well which clashes with React. You can use Bootstrap's CSS functions fine (like the grid system with col-md-*, the btn, label classes you are mentioning etc) but the Javascript part won't work. And the Carousel requires the Javascript part of Bootstrap (Other Bootstrap components that won't work are Modal, Navbar etc).

To resolve this you should use React-Bootstrap - Bootstrap components written in React - https://react-bootstrap.github.io/.

Here is the section for carousels - https://react-bootstrap.github.io/components/carousel/