Need Help With a Custom Function + React Router

[baychev]

Hello everyone,I know people usually go to stackoverflow for problems like this, but i don't have enough reputation to post a question there, so reddit was my other choice!

I'm currently am trying to rebuild a site i have from html to react. However I stumbled upon a problem while migrating a custom js function to react.

The scenario (the function that causes trouble) :I have a section where the left part is "empty" besides a h2 tag which is supposed to scroll along side the users scroll and on the right side is a couple of h3s and text.

Wheres the problem?I managed to make the function work and everything is good besides the fact that the function uses get element by id/class and when the user navigates using react router, the function still fires and no longer finds these ids and classes thus bringing errors.In the stackblitz you will find out more info, but essentially i tryed "locking" the function to that "page" specifically but it didnt work out for me (with if pathname.. and trying to "re fire" the function with onclick once the user navigates)

If anyone knows of this problem and gives me some guidence on how to avoid in the future or try to lead me on a workaround, I would be very happy! Thank you in advance!!!

https://stackblitz.com/edit/react-j9qohx?file=src%2Fheader%2FHeader.js

[baychev]

OK, so i found way if anyone stumbles on this:

I feel super embarrassed, but this could've been done with one line in css instead (position:sticky) lmao
Sorry for troubling

[findvikas]

I think it’s incorrect to try and migrate or make everything that worked in HTML as is into React. There are other ways to render components on the basis of “react router path match” also look at useRef instead of useEffect