title: Controllable React Bootstrap Carousel component not working
body: <p>Here is the code in the component I am getting the error at the bottom. </p>
  
  <p>This is where I got the controllable Carousel code from: <a href="https://react-bootstrap.github.io/components/carousel/" rel="nofollow noreferrer">https://react-bootstrap.github.io/components/carousel/</a></p>
  
  <p>Anyone know why I am getting this error? I cannot se how the handleSelect method is wrong...</p>
  
  <pre><code>import React, { Component } from 'react';
  import Carousel from 'react-bootstrap/Carousel'
  
  
  class CarouselComponent extends Component {
  
      setIndex = (selectedIndex) =&gt; {
      this.setState({index: selectedIndex})
      }   
  
      setDirection = (direction) =&gt; {
          this.setState({direction: direction})
      }
  
      handleSelect = (selectedIndex, e) =&gt; {
          this.setIndex(selectedIndex);
          this.setDirection(e.direction);
      }
  
      constructor(props) {
          super(props);
          this.state = {
              index: 0,
              setIndex: 0,
              direction: null,
              setDirection: null
          };
      }
  
      render() {
          const { index, direction } = this.state;
          return (
              &lt;div&gt;
                  &lt;Carousel activeIndex={index} direction={direction} onSelect={this.handleSelect}&gt;
                      &lt;Carousel.Item&gt;
                          &lt;img
                              className="d-block w-100"
                              src="https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fnapipelines.com%2Fwp-content%2Fuploads%2F2014%2F11%2FKomatsu-PC210LCi-10.jpg&amp;f=1&amp;nofb=1" alt="First slide"
                          /&gt;
                          &lt;Carousel.Caption&gt;
                              &lt;h3&gt;First slide label&lt;/h3&gt;
                              &lt;p&gt;Nulla vitae elit libero, a pharetra augue mollis interdum.&lt;/p&gt;
                          &lt;/Carousel.Caption&gt;
                      &lt;/Carousel.Item&gt;
                      &lt;Carousel.Item&gt;
                          &lt;img
                              className="d-block w-100"
                              src="holder.js/800x400?text=Second slide&amp;bg=282c34"
                              alt="Second slide"
                          /&gt;
  
                          &lt;Carousel.Caption&gt;
                              &lt;h3&gt;Second slide label&lt;/h3&gt;
                              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p&gt;
                          &lt;/Carousel.Caption&gt;
                      &lt;/Carousel.Item&gt;
                      &lt;Carousel.Item&gt;
                          &lt;img
                              className="d-block w-100"
                              src="https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.volvoce.com%2F-%2Fmedia%2Fvolvoce%2Fglobal%2Fproducts%2Fexcavators%2Fcrawler-excavators%2Fhero%2Fvolvo-show-crawler-excavator-ec750e-t4f-2324x1200.jpg%3Fmh%3D620%26mw%3D1205%26v%3DIP4tPw%26c%3D1%26cw%3D1200%26ch%3D620%26jq%3D80%26hash%3DD74491474FE2F6213A24E81C13AF995AD8D41A0D&amp;f=1&amp;nofb=1" alt="Third slide"
                          /&gt;
  
                          &lt;Carousel.Caption&gt;
                              &lt;h3&gt;Third slide label&lt;/h3&gt;
                              &lt;p&gt;
                                  Praesent commodo cursus magna, vel scelerisque nisl consectetur.
            &lt;/p&gt;
                          &lt;/Carousel.Caption&gt;
                      &lt;/Carousel.Item&gt;
                  &lt;/Carousel&gt;
  
              &lt;/div&gt;
          );
      }
  
  }
  
  
  export default CarouselComponent;
  </code></pre>
  
  <p>Here is the error I am getting.</p>
  
  <pre><code>./src/components/CarouselComponent.jsx
    Line 7:  Parsing error: Unexpected token
  
     5 | class CarouselComponent extends Component {
     6 | 
  &gt;  7 |    function handleSelect(selectedIndex, e) {
       |             ^
     8 |     setIndex(selectedIndex);
     9 |     setDirection(e.direction);
    10 | }
  </code></pre>