I have followed this tutorial to make a hamburger menu in 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>
)
}
But I keep getting this error message:
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
It also indicates the problem is at this row: const [isOpen, setIsOpen] = useState(false);
Can someone please help me to understand what is wrong?
EDIT: Here is a picture of the exact error message: https://pasteboard.co/3xyAu6m8IeAW.png
EDIT 2: I opened up my repo so you can see/test it on your own. Maybe the fault is in another file? The burgermenu is in the main-branch and ..components/userview and the page that imports and show the burgermenu is ../pages/hamburgertestfile.
The answer was provided by a user of the Next.js-github-forum: