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?
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.log
s 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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.