Can't assign submit event type

Question

Basically the title. Here is how the code looks:

 const handleSubmit = (e: React.FormEventHandler<HTMLFormElement>) => {
    // e.preventDefault()
  }

<form onSubmit={handleSubmit}></form>

Here is the error in full detail:

Type '(e: React.FormEventHandler<HTMLFormElement>) => void' is not assignable to type 'FormEventHandler<HTMLFormElement>'.
  Types of parameters 'e' and 'event' are incompatible.
    Type 'FormEvent<HTMLFormElement>' is not assignable to type 'FormEventHandler<HTMLFormElement>'.
      Type 'FormEvent<HTMLFormElement>' provides no match for the signature '(event: FormEvent<HTMLFormElement>): void'.ts(2322)
index.d.ts(1380, 9): The expected type comes from property 'onSubmit' which is declared here on type 'DetailedHTMLProps<FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>

Answer 1

We have to use React.FormEvent<HTMLFormElement> type for our form event.

const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    // e.preventDefault()
}

<form onSubmit={handleSubmit}></form>

React.FormEventHandler<HTMLFormElement> is a handler type for handling form elements.

React.FormEventHandler<HTMLFormElement> leads to below function type

(e: React.FormEvent<HTMLFormElement>) => void;

You can even give FormEventHandler type to your handleSubmit function if you want,

const handleSubmit: React.FormEventHandler<HTMLFormElement> = (e: React.FormEvent<HTMLFormElement>) => {
  // e.preventDefault()
};