React toggle body class when state is changed-CodePudding

I have a menu button on my site that when I click it I am toggling the visibility of the site menu. How can I also toggle a class on the site Body element when the menu button is visible, so that I can prevent vertical scrolling?

// App.js

function App() {
  return (
    <div className="App">
      <Header />
    </div>
  );
}

// Header.js

function Header() {
  // Set menu button default state
  const [active, setActive] = useState(false);

  return (
    <>
      // Menu Button
      <button
        onClick={() => setActive(!active)}
        type="button">
          <span className="is-block">{active ? 'Close' : 'Menu'}</span>
       </button>

       // Menu Links
       <div className={active ? 'c-navigation is-active' : 'c-navigation'}>
         <li>Link 1</li>
         <li>Link 2</li>
         <li>Link 3</li>
         <li>Link 4</li>
       </div>
    </>
  )
}

CodePudding user response：

doing something like this:

document.body.style.overflow = "hidden";

and don't worry you're not manipulating the DOM that React is rendering, you're manipulating its parent.

    function Header() {
  // Set menu button default state
  const [active, setActive] = useState(false);

  useEffect(() => {
    if (active) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "unset";
    }
  }, [active]);

  return (
    <>
      // Menu Button
      <button onClick={() => setActive(!active)} type="button">
        <span className="is-block">{active ? "Close" : "Menu"}</span>
      </button>
      // Menu Links
      <div className={active ? "c-navigation is-active" : "c-navigation"}>
        <li>Link 1</li>
        <li>Link 2</li>
        <li>Link 3</li>
        <li>Link 4</li>
      </div>
    </>
  );
}