title: How to properly pass event handlers as props into typescript react component?
body: <p>I'm trying to pass this handleSubmit event handler and I have no clue what I'm doing wrong. The function works fine if I use an anonymous function on the child component. The compiler doesn't throw any errors and I've used the typings from when you highlight the "onSubmit" prop on VS Code.</p>
  
  <p><strong>This is the parent component.</strong></p>
  
  <pre><code>const App: React.FC = () =&gt; {
    const [auth, setAuth] = useState&lt;boolean&gt;(false);
  
    const authToken = () =&gt; Math.random().toString(36).substr(2);
  
    const handleSubmit = ((e: React.FormEvent&lt;HTMLFormElement&gt;) =&gt; {
      e.preventDefault();
      localStorage.setItem("token", JSON.stringify(authToken()));
      setAuth(true);
      console.log('submit works');
    });
  
  
    return (
      &lt;div&gt;
        &lt;Navbar /&gt;
        &lt;Switch&gt;
          &lt;Route path="/" exact={true} handleSubmit={handleSubmit} auth={auth} component={Login} /&gt;
          &lt;Route path="/userlist" component={UserList} /&gt;
          &lt;Route path="/editscreen" component={EditScreen} /&gt;
        &lt;/Switch&gt;
      &lt;/div&gt;
    );
  };
  
  export default App;
  
  
  </code></pre>
  
  <p><strong>And the Child Component</strong></p>
  
  <pre><code>interface Props {
    handleSubmit: ((e: React.FormEvent&lt;HTMLFormElement&gt;) =&gt; void);
    auth: boolean;
  }
  
  const Login: React.FC&lt;Props&gt; = ({ handleSubmit, auth }) =&gt; {
    const [email, setEmail] = useState&lt;string&gt;("");
    const [password, setPassword] = useState&lt;string&gt;("");
  
    return (
      &lt;div&gt;
        &lt;form onSubmit={handleSubmit}&gt;
          &lt;label&gt;E-mail&lt;/label&gt;
          &lt;input
            onChange={(e) =&gt; setEmail(e.target.value)}
            type="email"
            name="email"
            value={email}
            required
          &gt;&lt;/input&gt;
          &lt;label&gt;Password&lt;/label&gt;
          &lt;input
            onChange={(e) =&gt; setPassword(e.target.value)}
            type="password"
            name="password"
            value={password}
            required
          &gt;&lt;/input&gt;
          &lt;button type="submit"&gt;SUBMIT!&lt;/button&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    );
  };
  
  export default Login;
  </code></pre>