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

You need to hook the button to do something onClick

Domino987
– Domino987

2021-01-28 16:08:51 +00:00
Commented Jan 28, 2021 at 16:08 — Domino987
– Domino987, Commented Jan 28, 2021 at 16:08

Sadequs Haque · Accepted Answer · 2021-01-28 16:10:43Z

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.

answered Jan 28, 2021 at 16:10

Sadequs Haque

15910 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Toggle not working on mobile screen

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related