React: Reset class when click on others elements

user_8543014 0
Viewed 34

I've created an hamburger menu that change the class name when a button is click it. This works

const Hamburger = ()=> {
    const [show, setShow] = useState(false);
    function showIt() {
        setShow(!show);
    }
    return (
        <HamburgerIcon className={show ? 'menu-open' : ' menu-close '} onClick={showIt}>
            <span></span>
        </HamburgerIcon>
    )
}
export default Hamburger;

Default state for the hamburger is ".menu-close" if you click toggle to ".menu-open". But when I click in a link inside the menu, the menu remain open.

What I want to achieve is to change the class also if a link in the menu is click it.

Any suggestion on what I should do here?

Thank you!!

reactjs javascript
2 Answers

Add the showIt function to the link inside the menu

Code:

const Hamburger = ()=> {
    const [show, setShow] = useState(false);
    function showIt() {
        setShow(!show);
    }
    return (
        <HamburgerIcon className={show ? 'menu-open' : ' menu-close '} onClick={showIt}>
          <a href="/some/path" onClick={showIt}>
          Example
          </a>
        </HamburgerIcon>
    )
}
export default Hamburger;
user_176160930

You can lift the state up to the parent component.

In the example below, I've lifted the state up to the lowest common ancestor component of Menu and Hamburger components. And then passed down the state via props.

function Hamburger({ isOpen, onClick }) {
  return <button onClick={onClick}>Menu {isOpen ? "↓" : "→"}</button>;
}

function Menu({ isOpen, menuItems, onClick }) {
  if (!isOpen) {
    return null;
  }
  return (
    <ul>
      {menuItems.map((item, index) => (
        <li key={index}>
          <button onClick={onClick}>{item}</button>
        </li>
      ))}
    </ul>
  );
}

function App() {
  const [isOpen, setIsOpen] = React.useState(false);

  const handleClick = () => setIsOpen(!isOpen);

  return (
    <nav>
      <Hamburger isOpen={isOpen} onClick={handleClick} />
      <Menu
        isOpen={isOpen}
        onClick={handleClick}
        menuItems={["Home", "About", "Contact"]}
      />
    </nav>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
ul {
  list-style: none;
}
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="root"></div>

user_190956300
Related