I cant make a navigation bar to change its background only on main(/) content in REACT

Question

I have a Header component like this

 const [small, setSmall] = useState(false)
    
    console.log(window.location.pathname)
    console.log(window.location.pathname === '/')

     useEffect(() => {
      
       if (typeof window !== "undefined") {
        if(window.location.pathname === '/'){
          window.addEventListener("scroll", () =>
          setSmall(window.scrollY > 640),
        
          );
        }
           
       }
     }, []);

html:

 <nav className={`padding-280px ${ small  ? "colorful" : "transparent"}`}

the problem is that when am on different Route, console says false, but Header component changes anyway. any tips?

Drew Reese · Accepted Answer · 2022-10-19T19:51:33.033

1

Issues

The useEffect hook runs only once when the component mounts. This means the window.location.pathname value from when the component mounted is closed over in callback scope. The logic doesn't invalidate the small state when not on the home "/" page.

Solution

I suggest using the useMatch hook to test if on the home "/" pathname and conditionally apply either the "colorful" or "transparent" class when the current location is "/" and the scroll position is greater than 640px. Don't forget to return a cleanup function to remove the scroll event listener when the component unmounts.

Example:

const homeMatch = useMatch("/");

const [small, setSmall] = useState(false);

useEffect(() => {
  const scrollHandler = () => {
    setSmall(window.scrollY < 640);
  };

  if (typeof window !== "undefined") {
    window.addEventListener("scroll", scrollHandler, { passive: true });
  }

  return () => {
    window.removeEventListener("scroll", scrollHandler, { passive: true });
  };
}, []);

...

<nav
  className={[
    "padding-280px",
    homeMatch && small ? "transparent": "colorful"
  ].join(" ")}
>
  ...
</nav>

edited Oct 19 '22 at 19:51

answered Oct 18 '22 at 18:28

Drew Reese

165,259
14
153
181

that solution is not working for me, idk why though,... but settng my state small to the second argument of the useeffect did, [small] ``` ``` – Y U K I M U R A Oct 19 '22 at 19:24
@gogaiosebashvili Did you run the codesandbox? Using the `small` state as a dependency for the `useEffect` hook seems like it could be problematic since the effect is to update the `small` state. In other words, there's the potential to create a render loop. That said, I don't see how `small` is possibly a dependency since it's not referenced in the effect callback at all. If you don't mind can you edit your post with what you are currently trying to do? – Drew Reese Oct 19 '22 at 19:32
I dont know how small works, but it does, problematicly. I ran the codesandbox, its working the over way. navbar should be transparent only if its on landing and is less than < 640 , but should always be colorful if its on the different route(its always tranparent on the different route in your exampple) .am relativly new to react so sorry if am saying some weird haikus :D – Y U K I M U R A Oct 19 '22 at 19:44
so, here's how it works: changed some minor details and it works :)) thanks a lot! homeMatch && small ? "transparent" : "colorful" setSmall(window.scrollY < 640); – Y U K I M U R A Oct 19 '22 at 19:50
I see, so invert the conditions, `setSmall(window.scrollY < 640);` and `homeMatch && small ? "transparent": "colorful"`. I've updated my answer and linked sandbox. – Drew Reese Oct 19 '22 at 19:51
@gogaiosebashvili Great! Sounds like it's working now for you. Cheers and good luck. – Drew Reese Oct 19 '22 at 20:07

I cant make a navigation bar to change its background only on main(/) content in REACT

1 Answers1

Issues

Solution