Solve - Property does not exist on type 'never' in React

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Check out my new book

Solve - Property does not exist on type 'never' in React #

The error "Property does not exist on type 'never'" occurs when we forget to type a state array or don't type the return value of the useRef hook. To solve the error, use a generic to explicitly type the state array or the ref value in your React application.

property does not exist on type never

If you got the error when declaring an array state variable with the useState hook, use a generic to type the array.

App.tsx
import {useState} from 'react'; function App() { // 👇️ use generic to type the state array const [arr, setArr] = useState<any[]>([]); return ( <div className="App"> <div>Hello world</div> </div> ); } export default App;

The example uses the very broad any type, but the concept applies to more specific types.

Here are some examples of how you would use more specific types when typing an array state variable.

App.tsx
import {useState} from 'react'; function App() { // 👇️ type it as string[] const [strArr, setStrArr] = useState<string[]>([]); // 👇️ type it as object array const [objArr, setObjArr] = useState<{name: string; age: number}[]>([]); return ( <div className="App"> <div>Hello world</div> </div> ); } export default App;

The reason this solves the error is because if you don't explicitly type the array, it implicitly gets a type of never[], which is effectively an array that will always be empty.

You might also get the "Property does not exist on type 'never'" error when using refs with the useRef hook.

App.tsx
import {useEffect, useRef} from 'react'; const ComponentA = () => { const inputRef = useRef(null); useEffect(() => { // ⛔️ Error: Property 'focus' does not exist on type 'never'.ts(2339) inputRef.current?.focus(); }, []); return ( <div> <input ref={inputRef} /> </div> ); };

To solve the error, use a generic to explicitly type the ref.

App.tsx
import {useEffect, useRef} from 'react'; const ComponentA = () => { // 👇️ type the ref as HTML input element const inputRef = useRef<HTMLInputElement>(null); useEffect(() => { // ✅ Works now inputRef.current?.focus(); }, []); return ( <div> <input ref={inputRef} /> </div> ); };

We used a generic to type the ref as an HTMLInputElement because we are assigning the ref to an input element in the example.

Your type is likely going to be different. If it's a different HTML element, their names are consistent, e.g. HTMLDivElement, HTMLSpanElement, etc.

You can also hover over any JSX element and read its type.

The type of the ref could be an object or whatever suites your use case.

App.tsx
import {useRef} from 'react'; const ComponentA = () => { const inputRef = useRef<{name: string}>(null); console.log(inputRef.current?.name.toUpperCase()); return ( <div> Hello World </div> ); };

This is necessary because if we don't type the ref, TypeScript can't know what type of value we will eventually assign to it.

Notice that we're also using the optional chaining (?.) operator. TypeScript doesn't know if we're going to assign a value to the ref, or if we are going to assign it to an HTML element like in the previous examples.

If you get the "Property does not exist on type 'never'" error, chances are you forgot to explicitly type a value and it implicitly got assigned a never type.

To debug this, hover over the value and look for ways to type it - most likely with generics if using React hooks.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.