title: Change Event gets mixed up with React and Typescript
body: <p>I have created a simple app with TypeScript and React.js . I used the create-react-app with the --scripts-version=react-scripts-ts argument and got a working app for a start.</p>
  
  <p>The app now has just 2 components: App.tsx, a stateful component with the list of persons and Person.tsx, a stateless functional component with the person data and the input text for the name.</p>
  
  <p>Here is the code for <strong>Person.tsx</strong>:</p>
  
  <pre><code>import * as React from "react";
  
  export interface IPersonProps {
    id: string;
    firstname: string;
    change: (event: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; void;
  }
  
  export const Person: React.SFC&lt;IPersonProps&gt; = props =&gt; {
    return (
      &lt;div&gt;
        &lt;h1&gt;
          Hi {props.firstname}
        &lt;/h1&gt;
        &lt;input type="text" onChange={props.change} value={props.firstname} /&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  
  <p>And here is the code for <strong>App.tsx</strong>:</p>
  
  <pre><code>import * as React from "react";
  import "./App.css";
  import { Person, IPersonProps } from "./Person";
  
  interface IAppState {
    persons: Array&lt;IPersonProps&gt;,
    showPersons: boolean;
  }
  
  class App extends React.Component&lt;{}, IAppState&gt; {
  
    readonly togglePersonsHandler = () =&gt; {
      const show = this.state.showPersons;
      this.setState({showPersons: !show});
    }
  
    readonly firstnameChangeHandler = (event:React.ChangeEvent&lt;HTMLInputElement&gt;, 
  personId: string) =&gt; {
      const personIndex = this.state.persons.findIndex(person =&gt; {
        return person.id === personId;
      });
      const person = {
        ...this.state.persons[personIndex]
      }
  
      person.firstname = event.target.value;
  
      const persons = [...this.state.persons];
      persons[personIndex] = person;
  
      this.setState({
        persons: persons
      } as IAppState);
    }
  
    constructor(props: any, state: IAppState) {
      super(props, state);
      this.state = {
        persons: [
          { id: 'a', firstname: "Michael" } as IPersonProps,
          { id: 'b', firstname: "Mel"} as IPersonProps
        ],
        showPersons: false
      };
    }
  
    public render() {
      let persons = null;
  
      if (this.state.showPersons) {
        persons = (
          &lt;div&gt;
            {
              this.state.persons.map((person, index) =&gt; {
                return &lt;Person 
                  id={person.id}
                  firstname={person.firstname} 
                  key={person.id} 
                  change={this.firstnameChangeHandler.bind(this, event,     person.id)} /&gt;
              })
            }
          &lt;/div&gt;
        )
      }
  
      return (
        &lt;div className="App"&gt;
          &lt;h1&gt;React&lt;/h1&gt;
          &lt;button onClick={this.togglePersonsHandler}&gt;Toggle Persons&lt;/button&gt;
          {persons}
        &lt;/div&gt;
      );
    }  
  }
  
  export default App;
  </code></pre>
  
  <p>The binding of the firstname to the input field works generally, but <strong>not for the first fired change event</strong>. The first change event gets an empty value when fired and the firstname will be set to an empty string. All other change events seem to work. As you can see I am using TypeScript and want to be as typesafe as possible...</p>
  
  <p>Maybe a mixed something up with the event binding. Any help is very welcome!</p>
  
  <p>The app looks like that:
  <a href="https://i.stack.imgur.com/76zns.png" rel="nofollow noreferrer">React app with event binding</a></p>