In React, I need to show a value programatically, I have this component:
const someComponente = ({
value,
logo,
}) => {
const divRef = React.useRef(null);
const [showLogo, setShowLogo] = React.useState(true);
const CONDITION = 24;
React.useEffect(() => {
if (divRef.current) {
setShowLogo(divRef.current.offsetHeight <= CONDITION);
}
});
return (<div ref={divRef}>
{logo && showLogo ? logo : null}
<span>{value}</span>
</div>)
};
It works ok, but only when I reload the page.
I want to get working that condition check even if I resize the component with DevTool by stretching or changing the width the window manually.
I guess that the divRef.current
doesn’t work with that, that’s why I thought that by removing the dependency of the useEffect
would work, in order to get the component rerendered each time that I’ll change the width, but it is not working.
Any hint?