Estoy intentando hacer un menú hamburguesa con react. Para esto utilizo una librería externa que al agregar la clase "is-active" al botón del menú este realiza la animación correspondiente, para que en vez de ser la opción de "abrir el menú" sea la opción de "cerrar el menú".
Los dos componentes son estos:
Componente padre:
import MenuHamburguesa from './MenuHamburguesa';
import Menu from './Menu';
export default function Header(props){
return(
<header className="header">
Merluzadepincho
<MenuHamburguesa/>
<Menu/>
</header>
);
}
Y componente hijo (el botón del menú):
import '../hamburgers-master/dist/hamburgers.css';
import React, { useState } from 'react';
export default function MenuHamburguesa(props){
const [className, setclassName] = useState("hamburger hamburger--minus");
let isActive = () =>{
className.includes("is-active") ?
setclassName("hamburger hamburger--minus") :
setclassName("hamburger hamburger--minus is-active");
}
return(
<button className={className} type="button" onClick={isActive}>
<span className="hamburger-box">
<span className="hamburger-inner"></span>
</span>
</button>
);
}
Sin embargo necesito que al cambiar el estado del componente hijo (MenuHamburguesa
), el componente <Menu>
(que hasta el momento era invisible), se vuelva visible. ¿Cómo puedo hacerlo siendo que <Menu>
está en un nivel superior que <MenuHamburguesa>
, pero es <MenuHamburguesa>
el que posee en onClick?