Property 'value' does not exist on type 'never'. when use useRef hook in mui

Question

I am using material UI to build a login and registration page, using useRef to return a TextFiled ref instance, and xxxRef.current.value to get the input value.

I can smoothly run my project and can get the value correctly，but the console always reminded me that:

Property 'value' does not exist on type 'never'.

Here is my code snippets：

const accountRef = useRef();

<TextField
            variant="outlined"
            margin="normal"
            required
            fullWidth
            id="account"
            label="Account"
            name="account"
            autoComplete="account"
            autoFocus
            defaultValue={account}
            inputRef={accountRef}
/>


const payload = {
      account: accountRef.current?.value ?? '',
      password: passwordRef.current?.value ?? '',
      nickname: nicknameRef.current?.value ?? '',
};

Solution 1

useRef is generic if you use it with TypeScript, so you can define the referenced element type like const ref = useRef<Type>();

Looking into the type definitions for the inputRef property in MaterialUI it states:

/**
 * Pass a ref to the `input` element.
 */
inputRef?: React.Ref<any>;

So for a fix you can define your refs like:

const accountRef = useRef<any>();

But the ref is passed through the input field inside the component, better type would be:

const accountRef = useRef<HTMLInputElement>();

Solution 2

Correct answer should be using correct Type (HTMLInputElement) when using useRef():

  const inputRef = useRef<HTMLInputElement>();
  const [caretPosition, setCaretPosition] = useState<number | null>(null);

  const updateCaretPosition = () => {
    inputRef.current && setCaretPosition(inputRef.current.selectionStart);
  };

Solution 3

Note that there are other Types which could be added to useRef.

Some other types maybe :

• HTMLElement
• HTMLFormElement
• number
• string
• etc...

useRef is commonly used for using a reference of a HTML element but it could also be used for storing data as well.