How do I implement a hamburger dropdown in my React navbar

Question

I am having trouble implementing a simple hamburger dropdown using bootstrap in my React project to make my header responsive.

I'm importing the raw css for Bootstrap in my index.html in the as so.

  <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/48938155eb24b4ccdde09426066869504c6dab3c/dist/css/bootstrap.min.css">

I have tried the collapsing navbar solution on the bootstrap documentation since that seems to be the simplest but that does not seem to work.

What am I doing wrong? Does importing the raw CSS work, so should I be using the react-bootstrap module or something else?

class Header extends Component {
  renderLinks() {
    if (this.props.authenticated) {
      // show link to signout
      console.log('here is the email: ', this.props.email);
      return (
        [
          <li className="nav-item" key={3}>
            <Link className="nav-link" to="/signout">Sign Out</Link>
          </li>,
          <li className="nav-item" key={4}>
              <p className="nav-link">Signed in as {this.props.email}</p>
          </li>
        ]
      );
    } else {
      // show link to sign in or sign out
    return ([
          <li className="nav-item" key={1}>
            <Link className="nav-link" to="/signin">Sign In</Link>
          </li>,
          <li className="nav-item" key={2}>
            <Link className="nav-link" to="/signup">Sign Up</Link>
          </li>
        ]
      );
    }
  }

  render() {
    return (
      <nav className="navbar navbar-expand-lg navbar-light bg-light">
        <Link to="/" className="navbar-brand"> Brand <br/><small>w/ react-router-dom</small></Link>

        <button
          className="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarNav"
          aria-controls="navbarNav"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
           <span className="navbar-toggler-icon"></span>
        </button>
        <div className="navbar-collapse collapse" id="navbarNav">
          <ul className="navbar-nav">
            {this.renderLinks()}
          </ul>
        </ div>
      </nav>
    );
  }
}
// end of class

Answer 1

As bootstrap responsive navbar is dependent on jQuery

you will need to decide from one of those options:

1) include jQuery

2) implement the functionality in react by yourself

3) [BEST] use "react-bootstrap" package

if you choose (3) you can go to this link: https://react-bootstrap.github.io/components/navbar/#navbars-mobile-friendly

and simply use their example:

<Navbar inverse collapseOnSelect>
  <Navbar.Header>
    <Navbar.Brand>
      <a href="#brand">React-Bootstrap</a>
    </Navbar.Brand>
    <Navbar.Toggle />
  </Navbar.Header>
  <Navbar.Collapse>
    <Nav>
      <NavItem eventKey={1} href="#">
        Link
      </NavItem>
      <NavItem eventKey={2} href="#">
        Link
      </NavItem>
      <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
        <MenuItem eventKey={3.1}>Action</MenuItem>
        <MenuItem eventKey={3.2}>Another action</MenuItem>
        <MenuItem eventKey={3.3}>Something else here</MenuItem>
        <MenuItem divider />
        <MenuItem eventKey={3.3}>Separated link</MenuItem>
      </NavDropdown>
    </Nav>
    <Nav pullRight>
      <NavItem eventKey={1} href="#">
        Link Right
      </NavItem>
      <NavItem eventKey={2} href="#">
        Link Right
      </NavItem>
    </Nav>
  </Navbar.Collapse>
</Navbar>