Updating functional component props doesn't change styling - reactjs

Question

I have this function component for rendering a span as a bar. When I render the component, I pass the prop scrolled as false. Then, jQuery updates the attribute to true when I have scrolled 150 pixels. I know it's not good practice to use jQuery, and I am migrating from it. For now, I want to get this to work as I am still learning functional components.
export default function Button(props) {
const [scrolled, setScrolled] = useState( props.scrolled );
useEffect(() => {
setScrolled(props.scrolled);
}, [scrolled]);
return (
<HamburgerButton scrolled={scrolled}>
<p>{scrolled}</p>
<span></span>
</HamburgerButton>
);
}
And this styled component definition:
const HamburgerButton = styled.div`
...
span {
background: ${props => props.scrolled === 'false' ? props.theme.white : props.theme.black};
}
...
`;
When I scroll, I see the attribute scrolled has changed in the DOM from 'false' to 'true' but the spans stay white. Also, the paragraph tag with {scrolled} doesn't change from false.

Answer 1

Issue
Your code memoizes the props.scrolled value in the hooks.
export default function Button(props) {
const [scrolled, setScrolled] = useState( props.scrolled ); // state initialized
useEffect(() => { // hook called first render
setScrolled(props.scrolled); // state updated with same value
}, [scrolled]); // state value never changes during life of component so effect hook never recomputes
return (
<HamburgerButton scrolled={scrolled}>
<p>{scrolled}</p>
<span></span>
</HamburgerButton>
);
}
Solution
You can directly pass prop to HamburgerButton
export default function Button(props) {
return (
<HamburgerButton scrolled={props.scrolled}>
<p>{props.scrolled}</p>
<span></span>
</HamburgerButton>
);
}
Or use the hooks and use the correct dependency
export default function Button(props) {
const [scrolled, setScrolled] = useState( props.scrolled );
useEffect(() => {
setScrolled(props.scrolled); // update state
}, [props.scrolled]); // with the value that changes here
return (
<HamburgerButton scrolled={scrolled}>
<p>{scrolled}</p>
<span></span>
</HamburgerButton>
);
}
Use a positive comparison for the true branch of a ternary and leverage javascript's truthy/falsey values. If scrolled is true, or any other truthy value, render black, if fasley, (false, 0, null, undefined) render white.
const HamburgerButton = styled.div`
...
span {
background: ${props => props.scrolled ? props.theme.black : props.theme.white};
}
...
`;
or
const HamburgerButton = styled.div`
...
span {
background: ${props => props.theme[props.scrolled ? 'black' : 'white']};
}
...
`;