javascript - React Toggle not working on mobile screen

Question

I have a hamburger toggle that I got from one template, but it seems I'm missing the 'activate on/off toggle' part because when I click the toggle nothing happens. What I'm missing?

<div data-testid="header">
    <header id="header" className="site-header">
        <div className="container">
          <div className="right-header">
            <nav className="main-menu">
              <button
                type="button"
                className="c-hamburger c-hamburger--htx"
              >
                <span />
              </button>
              <ul>
                <li>
                  <Link to="/news">
                    {headerText.news}
                    <i className="fa fa-caret-down" aria-hidden="true" />
                  </Link>
                </li>
             </div>
           </div>
         </header>
       </div>

And in the image is the template (where I got the code) working. It's only the html

question from:https://stackoverflow.com/questions/65940788/react-toggle-not-working-on-mobile-screen

Answer 1

You would use a state to store the status of the menu.

const [hamburgerState, setHamburgerState] = useState(true);

And then:

<button type="button"
onClick={() => hamburgerState?setHamburgerState(false):setHamburgerState(true);}
className="c-hamburger c-hamburger--htx">
<span/>
</button>

Then you would use this state variable's value to change the visibility of the menu, usually by changing a className.