How to remove className in ReactJS when page load?-CodePudding

I'm trying to remove a class added to my website. This class ("showmenu") was added when I click the "hamburguer icon" to show the hidden menu. When I click on a new page the mobile menu still opens because of the class "showmenu". Someone can help me to solve it?

import { useState } from "react";

const Navbar = () => {
  const [isActive, setActive] = useState(false);
  const handleToggle = (event) => {
    setActive(!isActive);
  };

  return (
    <header>
      <a className="toggle-nav" id="icons" onClick={handleToggle}>
        &#9776;
      </a>
      <nav id="nav-menu" className={`hidden${isActive ? " showmenu" : ""}`}>
        <Menu />
      </nav>
    </header>
  );
};
export default Navbar;

CodePudding user response：

I guess there are some CSS issues. An alternative way is to remove the DOM element completely when you want to hide it as below.

{isActive && (
  <nav id="nav-menu" className={`hidden${isActive ? " showmenu" : ""}`}>
    <Menu />
  </nav>
)}

CodePudding user response：

This is because the <Menu /> component is child of <nav>. What you can do is pass handleToggle as a prop into <Menu> component. Inside <Menu> component, when user clicks on a link, trigger handleToggle. Lemme know if it helps :)