i'm an beginner in react i try to make a website with it my problem is change a CSS property for a component from another one to open a Nav menu i make that with querySelector but i don't know if that is the best way to do

here to open the nav menu :

import './Navbar.css'

function Navbar() {

  const handOpenMenu = () => {
    const navMenu = document.querySelector(".navMenu");
    navMenu.style.cssText = 'display: flex'
  }

  return (
        <header className="navbar container">
            <a className='logo' href='/#'>pure mix</a>
            <i className="fa-solid fa-bars burgerBtn" onClick={handOpenMenu}></i>
        </header>
  )
}

export default Navbar

and here for close the nav menu :

import "./Navmenu.css";

function Navmenu() {

  const handlCloseMenu = () => {
    const navMenu = document.querySelector(".navMenu");
    navMenu.style.cssText = "display: none";
  }

  return (
    <div className="navMenu">
      <a className="navItem" href="/#">
        home
      </a>
      <a className="navItem" href="/#">
        about
      </a>
      <a className="navItem" href="/#">
        logo
      </a>
      <a className="navItem" href="/#">
        contact
      </a>
      <i className="fa-solid fa-xmark close" onClick={handlCloseMenu}></i>
    </div>
  );
}

export default Navmenu;

CodePudding user response：

Using useState hook for change state in your component

CodePudding user response：

The best solution would be to use the useState hook and pass in Boolean values of true or false. True would render the navbar component while false would not render it. Here is a link that describes how you would implement this in the best way possible(https://blog.logrocket.com/how-create-multilevel-dropdown-menu-react/)