I'm missing something simple here, I need to access a defined Ref within a useEffect . The debugger shows that this is undefined and therefore I can't do this.refOverlay.current;.
// Ref
const refOverlay = useRef(null);
// Sample useEffect that references it
useEffect(() => {
if (props.mode === 'new') {
let b = this; // Undefined
let a = this.refOverlay.current; // Error on this line
if (a) {
console.log('ok');
}
}
}, [props.mode]);
...
return (
{/* JSX Definition */}
<OverlayTrigger ref={refOverlay} trigger="click" rootClose placement="bottom" overlay={popoverApprover}>
<a href="javascript:void(0)" className="more-info">TEST</a>
</OverlayTrigger>
);
You have defined a functional based component. Which doesn't have the this
Simply remove the this keyword and you're fine.
There's no such this in the function component.
const Title = () => {
const ref = useRef(null)
useEffect(() => {
if (ref.current) {
ref.current.WHATEVERYOUWANTHERE
}
}, [])
}
NOTE: couple of difference between class and function component
useState