title: How to type a Form component with onSubmit?
body: <p>I've got my own <code>Form</code> component which I want to keep separated from the <code>Parent Component</code>. </p>
  
  <pre><code>const Form: React.FC&lt;any&gt; = ({ children, handleFormSubmit }) =&gt; (
    &lt;form onSubmit={handleFormSubmit}&gt;{children}&lt;/form&gt;
  );
  </code></pre>
  
  <p><code>Parent Component</code></p>
  
  <pre><code>const ParentComponent = () =&gt; {
  ...
  
  const handleFormSubmit = (event: React.FormEvent&lt;HTMLFormElement&gt;) =&gt; {
      event.preventDefault();
      publishReview(review).then(() =&gt; setReview(initialReviewState));
    };
  
  return (
   &lt;Form onSubmit={handleFormSubmit}&gt;
  ...
  &lt;/Form&gt;
  )}
  </code></pre>
  
  <p>I thought <code>handleFormSubmit</code> would get the types from its declaration <code>const handleFormSubmit = (event: React.FormEvent&lt;HTMLFormElement&gt;)</code>.</p>
  
  <p>But it doesn't</p>
  
  <p>I've tried to build an interface and even with an <code>any</code> type:</p>
  
  <pre><code>interface FormProps {
    handleFormSubmit: any
  }
  const Form: React.FC&lt;FormProps&gt;= ({ children, handleFormSubmit }) =&gt; (
    &lt;form onSubmit={handleFormSubmit}&gt;{children}&lt;/form&gt;
  );
  </code></pre>
  
  <p>But it gave the below error:</p>
  
  <pre><code>const Form: React.FunctionComponent&lt;FormProps&gt;
  Type '{ children: Element; onSubmit: (event: FormEvent&lt;HTMLFormElement&gt;) =&gt; void; }' is not assignable to type 'IntrinsicAttributes &amp; FormProps &amp; { children?: ReactNode; }'.
    Property 'onSubmit' does not exist on type 'IntrinsicAttributes &amp; FormProps &amp; { children?: ReactNode; }'.
  </code></pre>