0

I have this component that I call in my main.js

Menu.js

const Menu = ({isMenuOpen}) => {
   return (
     <>  
    <div className={`app-menu ${isMenuOpen ? "menu-open" : ""}` }>
      <div className='menuheader py-4 '><FaChevronLeft/> Logo</div>
    </div>   
     </>
 );
};

Main.js

const Browse= () => {
    const [isMenuOpen, setMenu] = useState(false);

    const handleMenu = () => {
    setMenu((prevState) => !prevState);
  };
 return (
        <>
       <Menu isMenuOpen={isMenuOpen} />
       <div className='fabar phone:block ' onClick={handleMenu} >< FaBars/></div>  //for opening menu
      
      </>
);

everything is working fine but now I added a button in my menuheader (chevronleft button) and everytime i click it i want the prop of isMenuOpen in the Menu.js to be false so that the menu will be closed, But i dont have an idea to access the prop and change it.

JAS MAL
  • 103
  • 1
  • 7
  • To update the parent's state you can pass down a function as another prop and call that. See [this answer](https://stackoverflow.com/a/35537718). In your case you could pass down `handleMenu` and call it upon click. – bluecouch Apr 06 '22 at 04:47
  • You will need the Button to be able to access the state of the menu component, and change that state once it is clicked. If you are adding the Button within the Browse component, you could just use the onClick event listener for the button and pass a function that closes the menu each time it is clicked. A function similar to handleMenu, but sets isMenuOpen to false each time. – Simeon Ikudabo Apr 06 '22 at 04:49
  • You can pass down `setMenu` callback down the Menu.js (similar to `isMenuOpen` you passed) and use it to change `isMenuOpen` to false using onClick event on chevronleft button. – dev_sanketsr Apr 06 '22 at 04:51
  • hello @SimeonIkudabo im adding the button in the menu.js where the menu is found not in the Browse/Main component – JAS MAL Apr 06 '22 at 04:54

0 Answers0