title: How to create Generic event handler with React TypeScript
body: <p>I have a component called <code>Button</code> which accepts the <code>onChange</code>props. Right now the type of <code>onChange: event: React.ChangeEvent&lt;HTMLInputElement&gt;</code> and working fine. I want to create a <code>union type</code> of expecting the following two types. I wanted to do something like this which makes this <code>onChange</code> generic type.</p>
  <pre><code>import React from 'react';
  
  type handleChange = (value: string,checked: boolean,name: string) =&gt; void 
   
  type eventHandleChange = &lt;T extends HTMLElement&gt;(
    event: React.ChangeEvent&lt;T&gt;
  ) =&gt; void;
  
  type Change = handleChange | eventHandleChange;
  
  type buttonProps ={
    onChange?: Change
  }
  
  export const Button =(Props:buttonProps) =&gt;{
    
    //code here
  
  }
  </code></pre>
  <p>But when I am trying to pass a function to props like this one it's giving me an error</p>
  <pre><code>import React from 'react';
  import Button from '../button';
  
  export const FooComponent=()=&gt;{
  
    const changHandler = (event: React.ChangEvent&lt;HTMLInputElement&gt;)=&gt;{
     setSelectedValue(event.targe.value)
    }
  
    return (
      &lt;Button onChange={changeHandler} /&gt;
    )
  }
  </code></pre>
  <p><strong>ERROR</strong></p>
  <pre><code>'(event: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; void' is not assignable to type 'eventHandleChange | handleChange | undefined'.
     
  Type '(event: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; void' is not assignable to type 'eventHandleChange'.
   
  Types of parameters 'event' and 'event' are incompatible.       
  Type 'ChangeEvent&lt;T&gt;' is not assignable to type 'ChangeEvent&lt;HTMLInputElement&gt;'.         
  Type 'T' is not assignable to type 'HTMLInputElement'.           
  Type 'HTMLElement' is missing the following properties from type 'HTMLInputElement': accept, align, alt, autocomplete, and 49 more.
  </code></pre>
  <p>As <code>HTMLInputElement</code> is extends from <code>HTMLElement</code> <code>T</code> Should be generic here for all <code>HTMLElement</code>. I am not sure what I am missing here in implemantation.</p>