useRef.current is undefined in a React Native functional component

Question

I'm trying to focus a text input field once the user clicks a button. The code looks as follows:

const refName = React.useRef();

const changeFocus = () => {
    refName.current.focus();
}

with the text input having an attribute ref defined as refName. This gives me an error (undefined is not an object (evaluating 'refName.current.focus')), and when I rewrite the changeFocus function as console.log(refName) this is what I get:

Object {
  "current": undefined,
}

I'm not sure how else I'm supposed to define the reference or how else to approach this problem. Thanks

Does this answer your question? React useRef is undefined

Anurag Srivastava
– Anurag Srivastava

2021-01-24 15:54:37 +00:00
Commented Jan 24, 2021 at 15:54 — Anurag Srivastava
– Anurag Srivastava, Commented Jan 24, 2021 at 15:54
Can you share the full component?

b3hr4d
– b3hr4d

2021-01-24 16:16:34 +00:00
Commented Jan 24, 2021 at 16:16 — b3hr4d
– b3hr4d, Commented Jan 24, 2021 at 16:16

Linda Paiste · Accepted Answer · 2021-02-02 22:12:10Z

2

You initialize your ref without a value, so there will be a moment that ref.current is undefined before it gets the value of the component that you attach it to.

You need to make your function call conditional so that it only happens if ref.current has been set:

const changeFocus = () => {
    refName.current?.focus();
}

You also need to declare the expected type for the ref, since it cannot be inferred from an initial value. The type could be the type of the specific component or it could be this:

interface Focusable {
  focus(): void;
}

const refName = React.useRef<Focusable>();

That should fix errors that you get when setting the ref property on the component.

answered Feb 2, 2021 at 22:12

Linda Paiste

42.6k8 gold badges81 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

useRef.current is undefined in a React Native functional component

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related