title: bootstrap carousel does not switch between slides when used in reactjs
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>The source:</p>
  
  <pre><code>import React from 'react'
  
  class LandingPage extends React.Component {
    render() {
      return (
        &lt;div className="container"&gt;
          &lt;div id="myCarousel" className="carousel slide" data-ride="carousel"&gt;
            &lt;ol className="carousel-indicators"&gt;
              &lt;li data-target="#myCarousel" data-slide-to="0" className="active"&gt;&lt;/li&gt;
              &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
              &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
            &lt;/ol&gt;
  
            &lt;div className="carousel-inner"&gt;
  
              &lt;div className="item active"&gt;
                &lt;img src={require("../images/pexels-photo-112640.jpeg")} alt="Chicago" className="landing-page-image" /&gt;
  
                &lt;div className="carousel-caption"&gt;
                  &lt;h3&gt;Chicago&lt;/h3&gt;
                  &lt;p&gt;Thank you, Chicago!&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div className="item"&gt;
                &lt;img src={require("../images/pexels-photo-110473.jpeg")} alt="Los Angeles" className="landing-page-image" /&gt;
  
                &lt;div className="carousel-caption"&gt;
                  &lt;h3&gt;Los Angeles&lt;/h3&gt;
                  &lt;p&gt;LA is always so much fun!&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div className="item"&gt;
                &lt;img src={require("../images/pexels-photo.jpg")} alt="New York" className="landing-page-image" /&gt;
                &lt;div className="carousel-caption"&gt;
                  &lt;h3&gt;New York&lt;/h3&gt;
                  &lt;p&gt;We love the Big Apple!&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  
            &lt;/div&gt;
  
            &lt;a className="left carousel-control" href="#myCarousel" data-slide="prev"&gt;
              &lt;span className="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;
              &lt;span className="sr-only"&gt;Previous&lt;/span&gt;
            &lt;/a&gt;
            &lt;a className="right carousel-control" href="#myCarousel" data-slide="next"&gt;
              &lt;span className="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;
              &lt;span className="sr-only"&gt;Next&lt;/span&gt;
            &lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default LandingPage
  </code></pre>
  
  <p>The import for bootstrap in my index.js is, as follows:</p>
  
  <pre><code>import 'bootstrap/dist/css/bootstrap.css'
  import 'bootstrap/dist/css/bootstrap-theme.css'
  </code></pre>
  
  <p>The tutorial where the carousel code is copied from (and 'class' changed to 'className') is available at: <a href="https://www.w3schools.com/bootstrap/bootstrap_carousel.asp" rel="nofollow noreferrer">https://www.w3schools.com/bootstrap/bootstrap_carousel.asp</a> </p>