Types of DOM events in React

2024-02-01 | Tag react types

When we want to extract a function to be passed to an event handler, we will need to explicitly set the type of event, such as React.MouseEvent, React.ChangeEvent, React.FormEvent, .etc. The generic event is React.SyntheticEvent.

import { useState } from 'react';

export default function Form() {
  const [value, setValue] = useState("Change me");

  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
    setValue(event.currentTarget.value);
  }

  return (
    <>
      <input value={value} onChange={handleChange} />
      <p>Value: {value}</p>
    </>
  );
}

The full list can be found on DefinitelyTyped which is based on the most popular events from the DOM

See https://react.dev/learn/typescript

Prev Next