Search code examples
javascriptreactjswebreactstrap

Is there any error in my code because of which My collapse component is not working?

I was creating a reactjs web-app and I wanted to use collapse feature in it. So I installed reactstrap dependancy and import "Collapse" component from there. But its not working in my code.

import { Component } from "react";
import React from "react";
import { Collapse, Navbar } from "reactstrap";
class Main extends Component {
  constructor(props) {
  super(props);
  this.state = {
  open: false
  };
}
 show() {
 this.setState({
  open: !this.state.open
  });
 }
 render() {
    return (
  <>
    <button onClick={() => this.show()}>Show</button>
    <Collapse isOpen={this.state.open}>
      <Navbar>hello</Navbar>
    </Collapse>
  </>
 );
}
}
export default Main;

Check out the demohere.

Solution

  • Add import 'bootstrap/dist/css/bootstrap.min.css'; in your index.js file.