title: How do I implement a hamburger dropdown in my React navbar
body: <p>I am having trouble implementing a simple hamburger dropdown using bootstrap in my React project to make my header responsive. </p>
  
  <p>I'm importing the raw css for Bootstrap in my index.html in the  as so. </p>
  
  <pre><code>  &lt;link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/48938155eb24b4ccdde09426066869504c6dab3c/dist/css/bootstrap.min.css"&gt;
  </code></pre>
  
  <p>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. </p>
  
  <p>What am I doing wrong? Does importing the raw CSS work, so should I be using the react-bootstrap module or something else?</p>
  
  <pre><code>class Header extends Component {
    renderLinks() {
      if (this.props.authenticated) {
        // show link to signout
        console.log('here is the email: ', this.props.email);
        return (
          [
            &lt;li className="nav-item" key={3}&gt;
              &lt;Link className="nav-link" to="/signout"&gt;Sign Out&lt;/Link&gt;
            &lt;/li&gt;,
            &lt;li className="nav-item" key={4}&gt;
                &lt;p className="nav-link"&gt;Signed in as {this.props.email}&lt;/p&gt;
            &lt;/li&gt;
          ]
        );
      } else {
        // show link to sign in or sign out
      return ([
            &lt;li className="nav-item" key={1}&gt;
              &lt;Link className="nav-link" to="/signin"&gt;Sign In&lt;/Link&gt;
            &lt;/li&gt;,
            &lt;li className="nav-item" key={2}&gt;
              &lt;Link className="nav-link" to="/signup"&gt;Sign Up&lt;/Link&gt;
            &lt;/li&gt;
          ]
        );
      }
    }
  
    render() {
      return (
        &lt;nav className="navbar navbar-expand-lg navbar-light bg-light"&gt;
          &lt;Link to="/" className="navbar-brand"&gt; Brand &lt;br/&gt;&lt;small&gt;w/ react-router-dom&lt;/small&gt;&lt;/Link&gt;
  
          &lt;button
            className="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarNav"
            aria-controls="navbarNav"
            aria-expanded="false"
            aria-label="Toggle navigation"
          &gt;
             &lt;span className="navbar-toggler-icon"&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;div className="navbar-collapse collapse" id="navbarNav"&gt;
            &lt;ul className="navbar-nav"&gt;
              {this.renderLinks()}
            &lt;/ul&gt;
          &lt;/ div&gt;
        &lt;/nav&gt;
      );
    }
  }
  // end of class
  </code></pre>