2

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?

1 respuesta 1

2

Puedes pasarle una funcion desde el componente padre al componente hijo para que si le das click al componente hijo se ejecute el codigo que necesites, de esta forma:

Componente Padre:

import MenuHamburguesa from './MenuHamburguesa';
import Menu from './Menu';

export default function Header(props){
    const miFuncionPadre = (parametro) => {
      console.log(`Parametro recibido desde el hijo = ${parametro}`);
    }

    return(
        <header className="header">
            Merluzadepincho
            <MenuHamburguesa miFuncionPadre={miFuncionPadre} />
            <Menu/>
        </header>
    );
}

Componente hijo:

import '../hamburgers-master/dist/hamburgers.css';
import React, { useState } from 'react';

export default function MenuHamburguesa({miFuncionPadre}){
    const [className, setclassName] = useState("hamburger hamburger--minus");
    
    let isActive = () =>{
        className.includes("is-active") ?
        setclassName("hamburger hamburger--minus") :
        setclassName("hamburger hamburger--minus is-active");
        //Llamado a funcion de padre
        miFuncionPadre('parametro');   
    }

    return(
        <button className={className} type="button" onClick={isActive}>
            <span className="hamburger-box">
                <span className="hamburger-inner"></span>
            </span>
        </button>  
    );
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.