Here is the code I'm trying to convert:
document.addEventListener("scroll", function() {
const links = document.querySelectorAll(".nav-link");
for (const l of links) l.classList.toggle('scrolling', window.scrollY > 0);
})
I want to change the color of all my links when the page is scrolling. Using an if-else statement would only change the color of the first link, so a forEach statement seems more appropriate.
The code above was converted to React like this:
const [isLinkScrolling, setIsLinkScrolling] = useState(false);
const handleLinkScroll = () => {
for (const l of links) {
l.classList.toggle('scrolling', window.scrollY > 0);
}
};
useEffect(() => {
document.addEventListener('scroll', handleLinkScroll);
return () => {
document.removeEventListener('scroll', handleLinkScroll);
};
}, []);
return (
<ul className={`nav_links ${isNavShowing ? "show_nav" : "hide_nav"}`}>
{
links.map(({name, path }, index) => {
return (
<li key={index}>
<NavLink to={path} className={({isActive}) => isActive ? "active-nav" : ""} onClick={() => setIsNavShowing(prev => !prev)}>{name}</NavLink>
</li>
)
})
}
</ul>
)
However, there seems to be an error here:
setIsLinkScrolling(
for (const l of links) l.classList.toggle( window.scrollY > 0);
);
I haven't been able to figure out this error yet.