How to type a Form component with onSubmit?

Question

I've got my own Form component which I want to keep separated from the Parent Component.

const Form: React.FC<any> = ({ children, handleFormSubmit }) => (
  <form onSubmit={handleFormSubmit}>{children}</form>
);

Parent Component

const ParentComponent = () => {
...

const handleFormSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    publishReview(review).then(() => setReview(initialReviewState));
  };

return (
 <Form onSubmit={handleFormSubmit}>
...
</Form>
)}

I thought handleFormSubmit would get the types from its declaration const handleFormSubmit = (event: React.FormEvent<HTMLFormElement>).

But it doesn't

I've tried to build an interface and even with an any type:

interface FormProps {
  handleFormSubmit: any
}
const Form: React.FC<FormProps>= ({ children, handleFormSubmit }) => (
  <form onSubmit={handleFormSubmit}>{children}</form>
);

But it gave the below error:

const Form: React.FunctionComponent<FormProps>
Type '{ children: Element; onSubmit: (event: FormEvent<HTMLFormElement>) => void; }' is not assignable to type 'IntrinsicAttributes & FormProps & { children?: ReactNode; }'.
  Property 'onSubmit' does not exist on type 'IntrinsicAttributes & FormProps & { children?: ReactNode; }'.

Answer 1

This worked for me. Just guessing based on your guess. Thanks!

handlePostForm = (e: React.FormEvent) => {

Answer 2

You would need to specify the type of the form elements. Let's say for example in your form you have an input with id yourInputName:

<form onSubmit={handleSubmit}>
  <div>
    <label htmlFor="yourInputName">Username:</label>
    <input id="yourInputName" type="text" />
  </div>
  <button type="submit">Submit</button>
</form>

In your handleSubmit, you would need to specify the type of the event.currentTarget. A form tag has a type of HTMLFormElement with a property elements, which are a type of HTMLFormControlsCollection, but we can override that to tell TS what our input is. Create an interface which extends the HTMLFormControlsCollection, specify the type of your field and then use the custom interface to override the elements property in the HTMLFormElement.

interface FormElements extends HTMLFormControlsCollection {
    yourInputName: HTMLInputElement
}

interface YourFormElement extends HTMLFormElement {
   readonly elements: FormElements
}

Then you pass that new type to your handling function

const handleFormSubmit = (e: React.FormEvent<YourFormElement>) => {}

You can now access the value of your field and typescript will know what it is

const handleFormSubmit = (e: React.FormEvent<YourFormElement>) => {
    e.preventDefault();
    console.log(e.currentTarget.elements.yourInputName.value)
}

If you hover on value, TS should show you a message that the data type is HTMLInputElement.value: string, just as you have specified in your FormElements interface.