title: React.js Navbar Hamburger Menu won't toggle closed
body: <p>So, I have a react.js app built with a group. Our Navbar works, but when the Navbar is toggled from a smaller screen using the Hamburger menu, it will open, but the toggle doesn't work to close it, it stays stuck open. I didn't program this page, but I've been trying to debug why it won't close, and for what I can see, it should work. </p>
  
  <p>Yes, I know react.bootstrap is a thing, and I was thinking about converting it, but I'm on a deadline and don't want to rewrite this entire component from scratch if it is at all possible. Any thoughts, or suggestions. I thought it was likely in the toggleNav function, but from what I've tested it seems to be correct. </p>
  
  <pre><code>import React, { Component } from "react";
  import { Link } from "react-router-dom";
  import "./style.css";
  
  class Nav extends Component {
    state = {
      open: false,
      width: window.innerWidth,
    };
  
    updateWidth = () =&gt; {
      const newState = { width: window.innerWidth };
  
      if (this.state.open &amp;&amp; newState.width &gt; 991) {
        newState.open = false;
      }
  
      this.setState(newState);
    };
  
    toggleNav = () =&gt; {
      this.setState({ open: !this.state.open });
    };
  
    setActiveNavItem = (path) =&gt; {
      return window.location.pathname === path ? "nav-link active" : "nav-link";
    };
  
    componentDidMount() {
      window.addEventListener("resize", this.updateWidth);
    }
  
    componentWillUnmount() {
      window.removeEventListener("resize", this.updateWidth);
    }
  
    render() {
      return (
        &lt;nav className="navbar navbar-expand-lg navbar-light"&gt;
          &lt;Link className="navbar-brand" to="/"&gt;
            Seenit
          &lt;/Link&gt;
          &lt;button
            onClick={this.toggleNav}
            className="navbar-toggler"
            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;/button&gt;
          &lt;div
            className={`${this.state.open ? "" : "collapse "}navbar-collapse`}
            id="navbarNav"
          &gt;
            {/* Navbar items */}
            &lt;ul className="navbar-nav"&gt;
              &lt;li className="nav-item"&gt;
                &lt;Link
                  onClick={this.toggleNav}
                  className={this.setActiveNavItem("/")}
                  to="/"
                &gt;
                  Home
                &lt;/Link&gt;
              &lt;/li&gt;
  
              &lt;li className="nav-item"&gt;
                &lt;Link
                  onClick={this.toggleNav}
                  className={this.setActiveNavItem("/create-post")}
                  to="/create-post"
                &gt;
                  Create a Post
                &lt;/Link&gt;
              &lt;/li&gt;
  
              &lt;li className="nav-item"&gt;
                &lt;Link
                  onClick={this.toggleNav}
                  className={this.setActiveNavItem("/log-in")}
                  to="/log-in"
                &gt;
                  Log In
                &lt;/Link&gt;
              &lt;/li&gt;
  
              &lt;li className="nav-item"&gt;
                &lt;Link
                  onClick={this.toggleNav}
                  className={this.setActiveNavItem("/sign-up")}
                  to="/sign-up"
                &gt;
                  Sign Up
                &lt;/Link&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/nav&gt;
      );
    }
  }
  
  export default Nav;
  </code></pre>