How to Type the onChange event of an element in React (TypeScript)?

TypeScript is a typed superset of JavaScript that adds optional static type checking to the language. This means that TypeScript can help you catch errors in your code before you even run it. One of the benefits of using TypeScript is that it can help you type your event handlers. This can make your code more readable and maintainable.

What is the onChange event?

The onChange event is a React event that is fired when the value of an element changes. You can use the onChange event to handle user interaction, such as updating the state of your component or submitting a form.

How to type the onChange event in React (TypeScript)

To type the onChange event in React (TypeScript), you need to specify the type of the event handler function. The type of the event handler function is always a function that takes an event object as an argument and returns void.

For example, the following code types the onChange event handler function for a text input element:

import React, { ChangeEvent } from "react";

const Input: React.FC<{}> = () => {
  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    // Handle the onChange event
  };

  return <input onChange={handleChange} />;
};

export default Input;

The handleChange() function takes an event object as an argument and returns void. This means that the function can perform any operation that it needs to perform, such as updating the state of the component or submitting a form.

Using the onChange event in React (TypeScript)

Once you have typed the onChange event handler function, you can use it in your React code like any other function. However, it is important to remember that the event handler function will be passed an event object as an argument. This means that you can use the event object to access information about the change event, such as the target element and the new value of the element.

For example, the following code logs the new value of the text input element to the console when the user changes the value:

import React, { ChangeEvent } from "react";

const Input: React.FC<{}> = () => {
  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    console.log(event.target.value);
  };

  return <input onChange={handleChange} />;
};

export default Input;

When the user changes the value of the text input element, the following output will be logged to the console:

  // Output
  my new value

I hope this helps!

How to Type the onChange event of an element in React (TypeScript)?