React-Bootstrap. Specifically with Parsing error: Unexpected token, expected ","

Question

So I have a parsing error and i don't know how to fix it. I am using React Bootstrap and I'm having trouble with declaring the Components at the very top of my code. And I just copied the Carousel code from the React-Bootstrap website itself and I just wanted to run it locally but I cannot seem to fix this issue.

Line 4: Parsing error: Unexpected token, expected ","

        2 | import logo from './logo.svg';
        3 | import './App.css';
   >    4 | import { Carousel, Carousel.Item, Carousel.Caption } from 'react-bootstrap';
          |                            ^
        5 | 
        6 | class App extends Component {
        7 |   render() {

My full code is here:

     import React, { Component } from 'react';
     import logo from './logo.svg';
     import './App.css';
     import { Carousel, Carousel.Item, Carousel.Caption } from 'react-bootstrap';

     class App extends Component {
      render() {
        return (
          <div className="App">
           <header className="App-header">
           {/* <img src={logo} className="App-logo" alt="logo" />
           {<p>
            Edit <code>src/App.js</code> and save to reload.
            </p> */}
            <Carousel>
               <Carousel.Item>
                 <img width={900} height={500} alt="900x500" src="/carousel.png" />
                 <Carousel.Caption>
                   <h3>First slide label</h3>
                      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                 </Carousel.Caption>
               </Carousel.Item>
               <Carousel.Item>
                 <img width={900} height={500} alt="900x500" src="/carousel.png" />
                  <Carousel.Caption>
                     <h3>Second slide label</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                  </Carousel.Caption>
               </Carousel.Item>
               <Carousel.Item>
                 <img width={900} height={500} alt="900x500" src="/carousel.png" />
                  <Carousel.Caption>
                    <h3>Third slide label</h3>
                         <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                  </Carousel.Caption>
               </Carousel.Item>
          </Carousel>;
          <a
        className="App-link"
        href="https://reactjs.org"
        target="_blank"
        rel="noopener noreferrer"
        >
        </a>
       </header>
      </div>
     );
  }
 }

 export default App;

Answer 1

4 | import { Carousel, Carousel.Item, Carousel.Caption } from 'react-bootstrap';

You only need to import Carousel . That will automatically import Carousel.Item and Carousel.Caption , since Item and Caption are on the object Carousel .