He seguido este tutorial para hacer un menú de hamburguesas en react/next.js: https://youtu.be/prbOI7G0RvY
import { useState } from "react"; import user from '../styles/userview.module.css' export function PageHeader() { const [isOpen, setIsOpen] = useState(false); const openMenu= ()=> setIsOpen(!isOpen); return ( <header className={user.header}> <nav className={user.navbar}> <a className={user.navlogo}>[BrandLogo]</a> <ul className={isOpen === false ? user.navmenu : user.navmenu + ' ' + user.active}> <li className={user.navitem}> <a className={user.navlink}>Home</a> </li> <li className={user.navitem}> <a className={user.navlink}>About</a> </li> <li className={user.navitem}> <a className={user.navlink}>Contact</a> </li> </ul> <button className={isOpen === false ? user.hamburger : user.hamburger + ' ' + user.active} onClick= {openMenu} > <span className={user.bar}></span> <span className={user.bar}></span> <span className={user.bar}></span> </button> </nav> </header> ) }Pero sigo recibiendo este mensaje de error:
Error: llamada de gancho no válida. Los ganchos solo se pueden llamar dentro del cuerpo de un componente de función. Esto podría suceder por una de las siguientes razones:
También indica que el problema está en esta fila: const [isOpen, setIsOpen] = useState(false);
¿Puede alguien por favor ayudarme a entender lo que está mal?
EDITAR: aquí hay una imagen del mensaje de error exacto: https://pasteboard.co/3xyAu6m8IeAW.png
EDICIÓN 2: abrí mi repositorio para que puedas verlo/probarlo por tu cuenta. ¿Quizás la falla está en otro archivo? El menú de hamburguesas está en la rama principal y ..components/userview y la página que importa y muestra el menú de hamburguesas es ../pages/hamburgertestfile.
La respuesta fue proporcionada por un usuario de Next.js-github-forum:
No puede llamar ganchos desde una función javascript regular como se especifica en los documentos , por lo tanto, intente importar React en su primera línea para convertir la función javascript en una función React
import React, { useState } from "react";