React & TypeScript: TS2345: Argument of type ‘null’ is not assignable to parameter of type ‘SetStateAction ‘.

This is a series of practical tips and observations for applying TypeScript in React with minimum or even zero theory. Now let’s look at Generics with useState() and useRef ()

Disclaimer

I have very scarce experience with TypeScript (0.5 year) and a moderate experience with React and React Native (1.5 years). I find TS documentations confusing and massive, I also like to share some solutions and will be glad to see any critical comments or advice on improvement.

Problem

I needed to add a drag&drop to my project at work and I have found a light-weight lib React Drag and Drop Files . It is really cool yet there is a line in the usage, which triggers TS error:

const [file, setFile] = useState(null);

As we know TS can infer types. I do recommend to read this article, it has a detailed explanation and very informative GIFs to illustrate them. So the type my state infers is null hence file cannot be assigned with the error from the title

TS2345: Argument of type ‘File’ is not assignable to parameter of type ‘SetStateAction<null>’.

Solution

If you read the article I referred above, you’d already know the solution to the issue, namely using generics. In our particular case we need to read the error message to the end and find out what type we need:

Type ‘File’ provides no match for the signature ‘(prevState: null): null’.

const [file, setFile] = useState<File | null>(null)
my IDE recognized File type with no problem

One more time

Actually, the same approach (and same issue, for that matter) exists in many other places, for instatnce, useRef(). I would love to show an example with focusing input.

const inputRef = useRef<HTMLInputElement | null>(null)useEffect(() => {
if (inputRef.current && isEditable) {
inputRef.current.focus()
}
}, [isEditable])
return (
<Form.Control
disabled={isLoading}
ref={inputRef}
type="text"
defaultValue={price}
/>
)
The HTMLInputElement interface provides special properties and methods for manipulating the options, layout, and presentation of <input> element

--

--

--

React JS. React Native developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Frontend Templating with Gulp and Twig.js

JavaScript: Add and Remove an Event Listener (Mouseover, Mouseout)

[Recon-ng V5]Footprinting and Reconnaissance

Mezon wrapper for processing HTTP requests

Understand Array Destructuring in JavaScript

Meet zx: A Better Way to Write Scripts with Node.js

Promises, and Asynchronous Javascript — Node.js

Learning jQuery: Application and Reflection

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Bogdan Selenginskiy

Bogdan Selenginskiy

React JS. React Native developer

More from Medium

State management in React with redux vanilla

useEffect vs. useLayoutEffect in plain language

This Week In React #94: 2 years 🥳️, memoization, composition, Remix, Next.js,

Conditional types for props using TypeScript and React