useState seemingly causing issues with nextjs
I'm trying to add a relatively simple toggle for a mobile menu, however it's causing weird button behaviour (requires several clicks, at least doubleclick to fire), and I get a warning that appears connected (Warning: Extra attributes from the server: class). If I remove useState from the component, the warning goes away.
'use client';
import { useState } from 'react';
import Link from 'next/link';
import { FaBars } from 'react-icons/fa';
import NavBar from '../Navigation/NavBar';
import MobileMenu from '../Navigation/MobileMenu';
const Header = () => {
const [mobileMenu, setMobileMenu] = useState(false);
const mobileMenuHandler = () => {
setMobileMenu(!mobileMenu);
console.log(mobileMenu);
};
const menuLinks = (
<>
<li>
<Link href='/'>Home</Link>
</li>
<li>
<Link href='/projects'>Projects</Link>
</li>
<li>
<Link href='/contact'>Contact</Link>
</li>
</>
);
return (
<>
<header>
<div className='flex w-full justify-between text-3xl mt-8 md:justify-center md:text-2xl'>
<span className='mx-8'>DBHaslund</span>
<button
onClick={mobileMenuHandler}
className='md:invisible md:mx-0 mx-8'
>
<FaBars />
</button>
</div>
<NavBar menuLinks={menuLinks} />
</header>
{mobileMenu && (
<MobileMenu menuLinks={menuLinks} menuButton={mobileMenuHandler} />
)}
</>
);
};
export default Header;
I can't for the life of me figure out what's going on, I assumed it'd be a pretty simple thing, and yet I have no idea what to try next. I hope I've provided enough info, otherwise let me know.5 Replies
Try
setMobileMenu((current) => !current);No difference, the behaviour persists, as does the warning
had this issue a while ago. it was one of my Chrome extensions that caused it
try disabling your extensions temporarily to see if it’s the same in your case
Urgh, no way
Thank you, that's all it was. I've been tearing my hair out trying to figure out what was wrong with my code -.-
For posterity's sake, the trouble maker was this one in firefox
