Can't access Ref from useEffect using "this.refname.current"

Question

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 don’t need `this`, the variable is in the same scope in arrow functions so you should be able to just use it — Sami Kuhmonen, Sep 09 '21 at 16:44
Does this answer your question? [How does the "this" keyword work?](https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work) — Emile Bergeron, Sep 09 '21 at 17:12

score 1 · Answer 1 · answered Sep 09 '21 at 16:44

1

You have defined a functional based component. Which doesn't have the this Simply remove the this keyword and you're fine.

answered Sep 09 '21 at 16:44

Gandalf The Gray

108
2
10

score 1 · Accepted Answer · answered Sep 09 '21 at 16:45

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

function component has no this, it's a function
function component is only the render function
to have state, you need useState
to have any persistent storage, you need hook

Can't access Ref from useEffect using "this.refname.current"

2 Answers2