title: onKeyDown and onChange with React and TypeScript
body: <p>I am trying to assing an <code>onChange</code> and <code>onKeyDown</code> to an Input component with TypeScript and this is getting out of hand.</p>
  <p>I have this <code>Input</code> component:</p>
  <pre><code>import React, { ChangeEvent, KeyboardEvent } from 'react'
  
  import { InputStyle } from './Input-style'
  
  type InputProps = {
    name: string
    value: string | number
    type?: string
    placeholder?: string
    onBlur?: () =&gt; void
    onKeyDown?: (e: KeyboardEvent) =&gt; void
    onChange?: (e: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; void
  }
  
  export const Input = (props: InputProps) =&gt; (
    &lt;InputStyle
      type={props.type ? props.type : 'text'}
      name={props.name}
      id={props.name}
      placeholder={props.placeholder}
      value={props.value}
      onKeyDown={props.onKeyDown}
      onChange={props.onChange}
      onBlur={props.onBlur}
    /&gt;
  )
  </code></pre>
  <p>Then I am using the component to do two things, validate that the keypress entered is a number and then add the value, and what seems to be an easy task is just giving me all sorts of TypeScript errors about the type</p>
  <pre><code>import React, { KeyboardEvent, ChangeEvent } from 'react'
  
  export const renderInput = () =&gt; {
    const [rate, setRate] = useState&lt;number&gt;(0)
  
     
    // I want to add the value only if is a number and between 0-1 no letters
    const addRate = (e: KeyboardEvent | ChangeEvent) =&gt; {
  
      const element = e.target as HTMLInputElement
      const value = element.value
  
      if ('key' in e) {
        const reg = /[0-9]/
        // If is not a letter
        if (reg.test(e.key)) {
          // Add the value but here now it breaks 
          setRate(isNaN(value) || value &gt; 1 ? 0 : value)
        }
      }
    }
  
    return (
      &lt;Input
       type='number'
       name='Conversion Rate'
       value={rate === 0 ? '' : rate}
       placeholder='Percentage Decimal number'
       onKeyDown={addRate}
       onChange={addRate}
     /&gt;
    )
  }
  </code></pre>
  <p>But at this point TypeScript errors with</p>
  <blockquote>
  <p>Argument of type 'string | 0' is not assignable to parameter of type 'SetStateAction'</p>
  </blockquote>
  <p>I am really confused cause before trying to check for the keyDown it worked.</p>