How to type a variable with useRef with TypeScript

Question

I use useRef() to deal with errors of a phone number from an input. I do it like this:

const errorPhoneDiv: MutableRefObject<{}> = useRef("");

A bit later in the code, I use errorPhoneDiv.current.innerText to set the written phone number, but TS tells me :

Property 'innerText' does not exist on type '{}'

What type should I pass to MutableRefObject to accept the useRef object?

Hi Johan! I pasted an answer; please check it and let me know! — Youssouf Oumar
– Youssouf Oumar, Commented Jan 2, 2023 at 13:46
"… to set the written phone number" - you should use react rendering for that, not a ref. — Bergi
– Bergi, Commented Jan 2, 2023 at 13:47

Youssouf Oumar · Accepted Answer · 2023-01-02 13:39:07Z

1

You could use HTMLInputElement if it's an input, HTMLDivElement if it's a div, etc. You also need an initial value, which could be null, in which case you need a null check before accessing innerHTML:

const errorPhoneDiv = useRef<HTMLInputElement | null>(null);
console.log(errorPhoneDiv.current?.innerHTML);

answered Jan 2, 2023 at 13:39

Youssouf Oumar

47.5k16 gold badges109 silver badges108 bronze badges

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

Collectives™ on Stack Overflow

How to type a variable with useRef with TypeScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related