title: How does placing an event handler in an anonymous function in React fix bind issues?
body: <p>Learning about <a href="https://facebook.github.io/react/docs/handling-events.html" rel="nofollow noreferrer">handling events in React</a>, can someone else how the binding works in both scenarios below? If you can reference the <code>handleClick</code> with <code>this.handleClick</code>, why do you still need to bind it? Wouldn't <code>this</code> inside the handler already be pointing to the component because it's the component who calls the handler? Also, why does placing the handler in an annonymous function also work?</p>
  
  <blockquote>
    <p>You have to be careful about the meaning of this in JSX callbacks. In
    JavaScript, class methods are not bound by default. If you forget to
    bind this.handleClick and pass it to onClick, this will be undefined
    when the function is actually called.</p>
  </blockquote>
  
  <p>The solution is this:</p>
  
  <pre><code>class Toggle extends React.Component {
    constructor(props) {
      super(props);
      this.state = {isToggleOn: true};
  
      // This binding is necessary to make `this` work in the callback
      this.handleClick = this.handleClick.bind(this);
    }
  </code></pre>
  
  <p>But why does this also work?</p>
  
  <pre><code>class LoggingButton extends React.Component {
    handleClick() {
      console.log('this is:', this);
    }
  
    render() {
      // This syntax ensures `this` is bound within handleClick
      return (
        &lt;button onClick={(e) =&gt; this.handleClick(e)}&gt;
          Click me
        &lt;/button&gt;
      );
    }
  }
  </code></pre>