Есть ли в моем коде ошибка, из-за которой не работает мой компонент сворачивания?

Question

Я создавал reactjs веб-приложение и хотел использовать в нем функцию сворачивания. Итак, я установил зависимость от reactstrap и импортировал оттуда компонент "Collapse". Но это не работает в моем коде.

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;

Посмотрите здесь демо .

Answer 1

Добавьте import 'bootstrap/dist/css/bootstrap.min.css'; в свой index. js файл.