Type the onSubmit event in React (TypeScript)

# Type the onSubmit event in React (TypeScript)

Use the React.FormEvent<HTMLFormElement> type to type the onSubmit event in React. The FormEvent interface is used for onSubmit events.

You can access properties on the form element the event is attached to on the currentTarget property.

App.tsx

Copied!
import React, {useState} from 'react';

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

  // 👇️ type event as React.FormEvent<HTMLFormElement>
  const handleSubmit = (
    event: React.FormEvent<HTMLFormElement>,
  ) => {
    // 👇️ prevent page refresh
    event.preventDefault();

    console.log(event.currentTarget.elements);
    console.log(event.currentTarget.elements[0]);
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          id="message"
          name="message"
          value={message}
          onChange={event => setMessage(event.target.value)}
        />

        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

export default App;

type onsubmit event in react typescript

The code for this article is available on GitHub

We typed the event as React.FormEvent<HTMLFormElement> because the FormEvent type is used for onSubmit events in React.

# 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 React, {useState} from 'react';

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

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

        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

export default App;

get type of onsubmit 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.

Now that we know that the correct type for the onSubmit event is React.FormEvent<HTMLFormElement>, we can extract our handler function.

App.tsx

Copied!
import React, {useState} from 'react';

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

  // 👇️ type event correctly
  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    // 👇️ prevent page refresh
    event.preventDefault();

    console.log(event.currentTarget.elements);
    console.log(event.currentTarget.elements[0]);
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          id="message"
          name="message"
          value={message}
          onChange={event => setMessage(event.target.value)}
        />

        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

export default App;

The code for this article is available on GitHub

We used the event.preventDefault() method in the handleSubmit function to prevent the page from refreshing when the form is submitted.

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

get type of event

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.

Notice that we used the currentTarget property on the event because we wanted to access the element that the event listener is attached to (the form element).

The target property on the event gives us a reference to the element that triggered the event.

Want to learn more about typing events in React? Check out these resources: Type the onChange event of an element in React (TypeScript),Type the onClick event of an element in React (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 onSubmit event in React (TypeScript)