The Be Sure Blog

Code Snippets | Problem Solving | Tips & Tricks

The Be Sure Blog banner

Find out the HTML input change event type in VS Code

posted on 19.2.2023 by Below Surface in "TypeScript"

Tested in VS Code.


Let's say we have this input:

<input type="text" id="uploadTitle" name="uploadTitle" value={uploadData.uploadTitle} onChange={changeHandler} required />

And the function changeHandler:

const changeHandler = (e) => {
}

TypeScript does not like "any" types, so we need to tell the compiler the event type of the input onChange. To find out, just add "(e) =>" before changeHandler and hover over the "(e)".

VS Code will tell us that the event type is:

React.ChangeEvent<HTMLInputElement>

So finally, we our code looks like this:

const changeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
}

And we can remove the "(e) =>" before the changeHandler of the input, so it looks like in the beginning again.

Tags:

typescript
react
next.js
input change event type
vs code

More posts of this category

How to set a TypeScript type to an useState hook

Learn how to add a TypeScript type to React useState hooks

TypeScript

How to instanciate a file object in TypeScript

Use the React useState hook to hold a file data object and properly instanciate it

TypeScript