Estoy tratando de usar React Hooks para implementar un menú de hamburguesas en el sitio web de mi proyecto, pero recibo algunos errores diferentes en la consola. El menú solo está visible para comenzar y el botón no tiene ningún efecto.

Advertencia: Tipo de prop fallido: open de prop no válida del object de tipo proporcionado a Burger , boolean esperado.

Advertencia: Tipo de utilería fallido: Conjunto de utilería abierto no setOpen de tipo de object proporcionado a Burger , function esperada.

TypeError no detectado: setOpen no es una función

Por favor, vea el código a continuación:

Hamburguesa.js

 import React from 'react'; import { bool, func } from 'prop-types'; import { StyledBurger } from './BurgerStyles'; const Burger = ({ open, setOpen }) => { return ( <StyledBurger open={open} onClick={() => setOpen(!open)}> <div /> <div /> <div /> </StyledBurger> ) } Burger.propTypes = { open: bool.isRequired, setOpen: func.isRequired, }; export default Burger;

Menú.js

 import React from "react"; import { bool } from 'prop-types'; import { StyledMenu } from "./MenuStyles"; const Menu = ({ open }) => { return ( <StyledMenu open={open}> CONTENT </StyledMenu> ) } Menu.propTypes = { open: bool.isRequired, } export default Menu;

El movimiento de menu.js se maneja en un componente con estilo usando:

 transform: ${({ open }) => open ? 'translateX(0)' : 'translateX(100%)'};

Aplicación.js

 import React, { useState } from 'react'; import Header from "./components/Header/Header"; import Menu from "./components/Menu/Menu"; const App = () => { const [open, setOpen] = useState(false); return ( <> <Menu open={open} setOpen={setOpen} /> <Header open={open} setOpen={setOpen} /> </> ) } export default App;

Encabezado.js

 import React, {useState} from 'react'; import Burger from '../Burger/Burger'; const Header = (open, setOpen) => ( <div> <Burger open={open} setOpen={setOpen} /> </div> )

Cualquier ayuda apreciada, gracias!!