title: Can't pass a head of a method to event handling in React markup
body: <p>In my <em>render()</em> I have the following component with event handling.</p>
  
  <pre><code>render() { ...
    &lt;input type="text" 
           onChange={(_) =&gt; { this.restate("email", _.target.value); }} /&gt;
  }
  
  private restate(type: string, input: any) { ...
    if (type === "email")
      this.setState({ ... });
  }
  </code></pre>
  
  <p>This works and behaves as supposed to. Since I'm learning React right now, I try to improve my syntax so it's smooth on the eyes. I've found <a href="https://stackoverflow.com/a/49820103/1525840">this answer</a> and liked the brevity of the event handler assignment. So I've changed my rendering and implemented the handler to be passed as follows.</p>
  
  <pre><code>render() { ...
    &lt;input type="text" onChange={ this.handleEmail } /&gt;
  }
  
  private handleEmail(data: React.ChangeEvent&lt;HTMLInputElement&gt;) {
    console.log("hit before: " + data.target.value);
    console.log(this);
    this.restate("email", data.target.value);
  }
  </code></pre>
  
  <p>The change in the markup seems to work, because the method <em>handleEmail(...)</em> is invoked. However, I get an error saying that <em>restate(...)</em> is not a method of <em>undefined</em> and, in fact, when I investigate what <em>this</em> is, I discovered it's <em>undefined</em>.</p>
  
  <p>I need help understanding what I'm doing wrong and how it deviates from the article linked to above. I tried to google for the syntax differences between versions of React but got nothing. And I'm not sure how to describe the issue in correct technical terms.</p>