Hi @uncut venture. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#Question about Lifecycles
sturdy pierBOT
To ensure that your JavaScript code is executed after everything is loaded, you can use the useEffect hook from React. This hook allows you to run side effects, such as DOM manipulation, after the component has been rendered.
Here's an example of how you can use useEffect to execute your JavaScript code after the component has been rendered:
import { useEffect } from 'react';
import { useRouter } from 'next/router';
import Link from 'next/link';
export default function Navigation() {
const router = useRouter();
useEffect(() => {
const defaultSelection = document.querySelector('.navigation-backdrop .active');
// Your additional code here
}, []);
return (
<li
className={
'relative -my-2 -mx-3 rounded-lg px-3 py-2 text-md text-gray-700 transition-colors delay-150 hover:text-gray-900 hover:delay-[0ms]' +
(router.pathname === '/' ? ' active' : '')
}
>
<Link href="/" style={{ '--x': '102%' }}>
Home
</Link>
</li>
);
}
In this example, the useEffect hook is called with an empty dependency array [], which means it will only run once after the component has been rendered. This should ensure that your JavaScript code is executed after the "active" class is set.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
uncut venture
unfortunately that doesnt work, the error I get is TypeError: Cannot read properties of null (reading 'scrollWidth')and this is my code ```import Link from "next/link";
import { useRouter } from 'next/router'
import {useEffect} from 'react';
export default function NavBar() {
const router = useRouter();
function setStyles(elementToStyle, eventTarget) {
elementToStyle.style.width = getStyles(eventTarget).w + 'px';
elementToStyle.style.height = getStyles(eventTarget).h + 'px';
elementToStyle.style.left = getStyles(eventTarget).pos + 'px';
}
function getStyles(target) {
return {
w: target.scrollWidth,
h: target.scrollHeight,
pos: target.offsetLeft
}
}
useEffect(() => {
const defaultSelection = document.querySelector('.navigation-backdrop .active');
const highlight = document.querySelector('#highlight');
setStyles(highlight, defaultSelection);
document.querySelectorAll('.navigation-backdrop li').forEach(item => {
item.addEventListener('mouseover', event => {
setStyles(highlight, event.target)
})
});
return () => {};
}, [router]);
return (
<>
<ul className={"navigation-backdrop"}>
<li className={"relative -my-2 -mx-3 rounded-lg px-3 py-2 text-md text-gray-700 transition-colors delay-150 hover:text-gray-900 hover:delay-[0ms]" + (router.pathname === "/" ? "active" : "")}>
<Link href="/" style={{ "--x": "102%"}}>Startseite</Link>
</li>
<div id="highlight" className={"bg-primary rounded-md"}/>
</ul>
</>
)
}```
can you help?
bot? xD
@sturdy pier
sturdy pierBOT
Let me check the knowledge base for you again. One moment! :books:
Sorry @uncut venture, I seem to be having a bit of trouble. Don't worry though, I've pinged my supprt and they will try to fix me up! :technologist:
Perhaps try again in 15mins?
uncut venture
@sturdy pier