I have a problem with React. I would like my mobile menu to close only after the end of the transition on my last span of the Hover-Clone div.
I managed to do something but every second I reopen the menu it closes automatically.
I don't understand how I can make it work? Should I use useTransition, useRef, useHook?
const [isActive, setIsActive] = useState(false);
const showNavBar = () => {
setIsActive(!isActive);
};
const spanEnd = document.querySelectorAll('.end');
spanEnd.forEach(l => {
if (isActive === true) {
l.addEventListener('transitionend', () => {
showNavBar();
});
}
});
<nav className={isActive ? Style.navBarMobile : Style.navBar}>
<ul className={Style.navBarList}>
<li className={Style.navBarListItem}>
<NavLink className={Style.navBarListLink} to='/a_propos'>
<div className={Style.original}>
<span>à</span>
<span> </span>
<span>p</span>
<span>r</span>
<span>o</span>
<span>p</span>
<span>o</span>
<span>s</span>
</div>
<div className={Style.hoverClone}>
<span>à</span>
<span> </span>
<span>p</span>
<span>r</span>
<span>o</span>
<span>p</span>
<span>o</span>
<span className='end'>s</span>
</div>
</NavLink>
</li>
Kind Regards
Disclaimer: I'm not a react beast
Your showNavBar method isn't actually showing the navbar, but rather toggling it. If it's closed, it will open it, if opened, it will close it.
toggleNavBar)setIsActive(true) insteadGive the second option a try and see what happens
edit As a matter of fact you probably still need the toggle option for the open/close button
So you could do
const ToggleNavBar = (to = null) => {
const end_state = to === null ? !isActive : to
setIsActive(end_state);
};
then use it for your button like
// ...
onClick={toggleNavBar}
// ...
And for your span loop
//...
toggleNavBar(true)
//...