'Collapse' is not defined react/jsx-no-undef

Question

I am new in React, Now I am trying to do sidebar and hide show collapse menu item.

here is function=>

 collapsemetoggle(){
        this.setState(state => ({ collapsemeopen: !state.collapsemeopen }));
      }


 <div className="list-group list-group-flush">
          <a href="#" className="list-group-item list-group-item-action bg-light">Dashboard</a>              
          <a onClick={this.collapsemetoggle} data-toggle="collapse" className="list-group-item list-group-item-action bg-light">Collapase Me</a>

          <Collapse isOpen={this.state.collapsemeopen}>
            <div className="list-group list-group-flush">
              <a href="#" className="list-group-item list-group-item-action bg-light">Dashboard</a>                  
            </div>
          </Collapse>
        </div>

      </div>

But why

'Collapse' is not defined react/jsx-no-undef

is shown? I just reference from here=>

React Transition

I am trying to achieve to get sidebar like =>

Sidebar

Other people use ul li for menu list and I am trying to do with collapse. Is it the correct way? If not, Plase let me know for some example.

Answer 1

import Collapse:

import {Collapse} from 'react-bootstrap'

use props in instead of isOpen

 <Collapse in={this.state.open}>
      <div id="example-collapse-text">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
        terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
        labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </Collapse>