Piece of state changes in parent component but not in child components React

Question

I have a component tree that looks as so:

<Profile>
   <FollowersAndFollowing>
      <Overlay>
         {children}
      </Overlay>
   </FollowersAndFollowing>
</Profile>

In <Profile/> I have a piece of state holding a boolean value:

const [showFollowers, setShowFollowers] = useState(false)

I am trying to prop funnel this piece of state to all of my components. In my <Profile/> I have these two functions.

  const handleShowFollowers = () => setShowFollowers(true)
  const handleHideFollowers = () => setShowFollowers(false)

  console.log('from profile', showFollowers) // logs true, then logs false

IN PROFILE

{showFollowers ? <FollowersAndFollowing showFollowers={showFollowers} handleHideFollowers={handleHideFollowers} /> : null}

FOLLOWERS AND FOLLOWING

const FollowersAndFollowing = ({ showFollowers, handleHideFollowers }) => {

  console.log('from followers', showFollowers) // logs true, then logs nothing at all

  return (
    <Overlay isShowing={showFollowers} currentTopPosition={0}>
      <h1>followers and following</h1>
      <button onClick={handleHideFollowers}>BACK</button>
    </Overlay>
  )
}

OVERLAY

const Overlay = ({ isShowing, children, currentTopPosition }) => {

  console.log('from overlay', isShowing) // logs true, then logs nothing at all

  useEffect(() => {
    if (isShowing) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "visible";
    }
  }, [isShowing])

  return (
    <div className={isShowing ? overlayStyles.showOverlay : overlayStyles.overlay} style={{ top: `${currentTopPosition}px` }}>
      {children}
    </div>
  )
}

When I trigger handleShowFollowers from my <Profile/> component I see showFollowers as true for all three components.

However when I trigger handleHideFollowers from the <FollowersAndFollowing/> component I see showFollowers flip to false in the parent component (profile) but not in any of the other two components. What could be causing this?

Answer 1

This line is the problem:

{showFollowers ? <FollowersAndFollowing showFollowers={showFollowers} handleHideFollowers={handleHideFollowers} /> : null}

If showFollowers is false then your FollowersAndFollowing component won't render at all, that's why the console.logs do no log.

If you change it to just this:

<FollowersAndFollowing showFollowers={showFollowers} handleHideFollowers={handleHideFollowers} />

You can then handle hiding elements deeper down inside the children components and it should work fine.