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

# Type the onChange event of an element in React (TypeScript)

To type the onChange event of an element in React, set its type to React.ChangeEvent<HTMLInputElement>.

The ChangeEvent type has a target property that refers to the element. The element's value can be accessed on event.target.value.

App.tsx

Copied!
import {useState} from 'react';

const App = () => {
  const [message, setMessage] = useState('');

  // 👇️ type as React.ChangeEvent<HTMLInputElement>
  // or React.ChangeEvent<HTMLTextAreaElement> (for textarea elements)
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setMessage(event.target.value);
    console.log(event.target.value);
  };

  return (
    <div>
      <input
        type="text"
        id="message"
        name="message"
        onChange={handleChange}
        value={message}
      />
    </div>
  );
};

export default App;

type onchange event of element in react typescript

The code for this article is available on GitHub

We typed the event as React.ChangeEvent<HTMLInputElement> because we're typing an onChange event on an input element.

If you have a textarea element, you would type the event as React.ChangeEvent<HTMLTextAreaElement>.

# The easiest way to find the type of an event

The easiest way for you to find out what the type of an event is, is to write the event handler inline and hover over the event parameter in the function.

App.tsx

Copied!
import {useState} from 'react';

const App = () => {
  const [message, setMessage] = useState('');

  // 👇️ event is written inline
  // hover over the `event` parameter with your mouse
  return (
    <div>
      <input
        type="text"
        id="message"
        name="message"
        onChange={event => console.log(event)}
        value={message}
      />
    </div>
  );
};

export default App;

get type of change event inline

The code for this article is available on GitHub

When the event is written inline, I can hover over the event parameter and it shows me what the type of the event is.

TypeScript is able to infer the type of the event when it's written inline.

This is very useful because it works with all events. Simply write a "mock" implementation of your event handler inline and hover over the event parameter to get its type.

Once you know the type of the event, you are able to extract your handler function and type it correctly.

Want to learn more about typing events in React? Check out these resources: Type the onClick event of an element in React (TypeScript),Type the onFocus and onBlur events in React (TypeScript).

# Type the onChange event of a textarea element

Let's look at an example that uses the same approach to get the type of an onChange event of a textarea element.

App.tsx

Copied!
import {useState} from 'react';

const App = () => {
  const [message, setMessage] = useState('');

  // 👇️ event is written inline
  // hover over the `event` parameter with your mouse
  return (
    <div>
      <textarea
        id="message"
        name="message"
        onChange={event => console.log(event)}
        value={message}
      />
    </div>
  );
};

export default App;

get type of change event textarea

The code for this article is available on GitHub

All we had to do to get the type of the onChange event was to write it inline on the element and hover over the event parameter.

Now that we have the type, we can extract the event handler into a function and type it correctly.

App.tsx

Copied!
import {useState} from 'react';

const App = () => {
  const [message, setMessage] = useState('');

  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
    setMessage(event.target.value);
    console.log(event.target.value);
  };
  return (
    <div>
      <textarea
        id="message"
        name="message"
        onChange={handleChange}
        value={message}
      />
    </div>
  );
};

export default App;

Note that you can use this approach to get the type of all events, not just onChange events.

As long as you write the event handler function inline and hover over the event parameter, TypeScript will be able to infer the event's type.

I've also written a detailed guide on how to use create-react-app with TypeScript.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

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