How to make mobile button from bootstrap toggle menu in React?

Question

I am using bootstrap 4.0 in React. Just plain bootstrap:

import React from "react";
import ReactDOM from "react-dom";
import "bootstrap/dist/css/bootstrap.css";

How can I make it work properly with React. When I use mobile and medium screen size it is appearing but it does not work. What is the proper way in this situation? Create local state with toggle manually?

Watch how it works here: project

Answer 1

Here is an example from https://reactstrap.github.io/components/navbar/

this is using reactstrap but may help you understand how to do it in react

import React from 'react';
import { Collapse, Navbar, NavbarToggler, NavbarBrand, Nav, NavItem, NavLink } from 'reactstrap';

export default class Example extends React.Component {
  constructor(props) {
   super(props);

   this.toggleNavbar = this.toggleNavbar.bind(this);
   this.state = {
    collapsed: true
   };
  }

 toggleNavbar() {
  this.setState({
   collapsed: !this.state.collapsed
  });
}


render() {
    return (
      <div>
        <Navbar color="faded" light>
          <NavbarBrand href="/" className="mr-auto">reactstrap</NavbarBrand>
          <NavbarToggler onClick={this.toggleNavbar} className="mr-2" />
          <Collapse isOpen={!this.state.collapsed} navbar>
            <Nav navbar>
              <NavItem>
                <NavLink href="/components/">Components</NavLink>
              </NavItem>
              <NavItem>
                <NavLink href="https://github.com/reactstrap/reactstrap">GitHub</NavLink>
              </NavItem>
            </Nav>
          </Collapse>
        </Navbar>
      </div>
    );
  }
}