How to make hamburger menu dissapear after clicking link with react scroll - reactjs

Question

I am trying to make my hamburger menu work with react scroll. It works as it should but when i click the links the menu does not dissapear. I tried the below but it makes it worst.
import React from 'react';
// import nav data
import { navData } from '../data';
// import components
import Socials from './Socials';
import { Link} from "react-scroll";
import { useState } from 'react';
const NavMobile = () => {
// destructure nav data
const [isActive, setIsActive] = useState(true)
const { items } = navData;
return (
<nav className={`${isActive? "w-full h-full flex flex-col justify-evenly overflow-hidden" : ""}`}>
<ul className='flex flex-col justify-center items-center gap-y-6 py-6 mb-8'>
{items.map((item, index) => {
return (
<Link
activeClass="active"
to={item.href}
spy={true}
smooth={true}
offset={-70}
duration={500}
>
<li key={index} onClick={setIsActive(!isActive)}>
<a className='text-2xl font-primary uppercase' href={item.href} >
{item.name}
</a>
</li>
</Link>
);
})}
</ul>
<div className='text-2xl'>
<Socials />
</div>
</nav>
);
};
export default NavMobile;
I just can't find out what's the problem

Answer 1

Your conditional classNames for your <nav> don't need to be wrapped in the template literal ${} the line is instead written as follows
<nav className={isActive ? "w-full h-full flex flex-col justify-evenly overflow-hidden" : ""}>
Your onClick handler should also have it's own defined function.
const handleClick = () => {setIsActive(!isActive)}
And then be parsed to the onClick method of the <li>
<li key={index} onClick={handleClick}>
See https://bobbyhadz.com/blog/react-onclick-pass-event-and-parameter#:~:text=To%20pass%20an%20event%20and,event%20and%20parameter%20to%20handleClick%20. for more help. This is necessary because you are parsing the function to the onClick method rather than the result of the function.