Jae Profile picture
Jae
frontend developer at @fabreadsdotcom, Chelsea fan
Dec 12, 2022 5 tweets 1 min read
Conditional rendering with useEffect()
I once had this footer navbar that needs to be hidden on some pages and visible on others, one way to solve this was to play with z-index and render the new page over the navbar, but that just didn't feel right.
So useEffect(), here's how: In the App component (common parent of Navbar and NavbarHiddenPage) I manage a state toggleNavbarVisibility, as a prop I pass value of state to Navbar, and likewise the setVisibility function to NavbarHiddenPage.

In the Navbar component I add styles based on the visibility state