title: React-typescript: TypeError: Cannot read property 'id' of undefined
body: <p>I am using React-typescript for my. I have one login page where there are two input fields. one is email and password. i have created one state and inside the state there <code>email</code> <code>password</code> and <code>loading</code>. Default input fields works fine, I have target my input fields with <code>id</code>. I have decided, I will create global input fields and custom props. When I used global input fields then it does not target the <code>id</code>  and throws me this error: <code>React-typescript: TypeError: Cannot read property 'id' of undefined</code>. I am pretty sure in my typescript <code>onChange</code> throws me that error. But Don't know to how to fix it. Here is my code in <a href="https://codesandbox.io/s/competent-mcclintock-tjxj8?file=/src/App.tsx" rel="nofollow noreferrer">Codesandbox</a>.</p>
  <p><strong>This is my Login form</strong></p>
  <pre><code>import React, { ReactElement, useState } from &quot;react&quot;;
  
  import { TextInput } from &quot;./input&quot;;
  
  interface Props extends PageProps {}
  
  export default function SignIn({}: Props): ReactElement {
    const [state, setState] = useState({
      email: ``,
      password: ``,
      loading: false
    });
    const { loading, email, password } = state;
    const handleSignIn = (e: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {
      setState({
        ...state,
        [e.target.id]: e.target.value //This is id which throws me error
      });
    };
    const onSubmit = async (e) =&gt; {
      e.preventDefault();
      console.log(state);
      setState({
        loading: true,
        ...state
      });
      const response = await fetch(
        &quot;https://run.mocky.io/v3/beec46b8-8536-4cb1-9304-48e96d341461&quot;,
        {
          method: `POST`,
          headers: {
            Accept: `application/json`,
            &quot;Content-Type&quot;: `application/json`
          },
          body: { state }
        }
      );
      console.log(response);
  
      if (response.ok) {
        setState({ ...state, loading: false });
        alert(`login succs`);
      } else {
        alert(`login failed`);
      }
    };
    return (
      &lt;div&gt;
        &lt;TextInput
          type=&quot;text&quot;
          value={email}
          onChange={handleSignIn}
          id=&quot;email&quot;
          required
        /&gt;
        &lt;TextInput
          type=&quot;password&quot;
          value={password}
          onChange={handleSignIn}
          id=&quot;password&quot;
          required
        /&gt;
        &lt;button type=&quot;submit&quot; name=&quot;action&quot; onClick={onSubmit} disabled={loading}&gt;
          {&quot; &quot;}
          {loading ? `loading...` : `save`}
        &lt;/button&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p><strong>this is my global input</strong></p>
  <pre><code>import React, { ReactElement } from &quot;react&quot;;
  import styled from &quot;styled-components&quot;;
  
  interface Props {
    value: string;
    onChange: (e: string) =&gt; void;
    error?: string;
    id?: string;
  }
  
  const Input = styled.input``;
  
  // eslint-disable-next-line func-style
  export function TextInput({ value, onChange, error, id }: Props): ReactElement {
    return (
      &lt;div&gt;
        &lt;Input
          value={value}
          onChange={(e) =&gt; onChange(e.target.value)}
          error={error}
          id={id}
        /&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>