title: Arrow function "this" binding not working in React component
body: <p>As I understand it ES6 arrow functions "preserve <code>this</code> context when they are called." I have seen examples in React components using them to bind this in class methods. I know I can bind in the constructor like this:</p>
  
  <pre><code>constructor(props) {
      super(props);
      this.getContent = this.getContent.bind(this);
      this.handleClick = this.handleClick.bind(this);
  }
  </code></pre>
  
  <p>But when I try to use an arrow function</p>
  
  <pre><code>handleClick = (event) =&gt; {
      this.props.openForm();
  }
  </code></pre>
  
  <p>I get the following error</p>
  
  <pre><code>Module build failed: SyntaxError: Unexpected token (18:14)
  
    16 |   }
    17 | 
  &gt; 18 |   handleClick = (event) =&gt; {
       |               ^
    19 |     this.props.openForm();
    20 |   }
    21 | 
  </code></pre>
  
  <p>Why isn't this working?</p>
  
  <p>Here's the full component</p>
  
  <pre><code>import React from 'react';
  import Section from './Section';
  import { connect } from 'react-redux';
  import * as actions from '../actions/actions';
  
  class Contact extends React.Component {
  
    getContent() {
      return this.props.content || {};
    }
  
    handleClick = (event) =&gt; {
      this.props.openForm();
    }
  
    render() {
      return (
        &lt;Section heading="Contact" bg="white"&gt;
  
            &lt;div className="contact"&gt;
  
              &lt;h3 className="contact__heading"&gt;{ this.getContent().heading }&lt;/h3&gt;
  
              &lt;p&gt;{ this.getContent().text }&lt;/p&gt;
  
              &lt;button className="contact__button contact__btn-dialog" 
                  onClick={ this.handleClick }&gt;
                Send a message
              &lt;/button&gt;
  
            &lt;/div&gt;
  
        &lt;/Section&gt;
      );
    }
  }
  
  const mapDispatchToProps = (dispatch) =&gt; {
    return {
      openForm: () =&gt; {
        dispatch(actions.showContactForm(true));
      }
    };
  };
  
  export default connect(
    null,
    mapDispatchToProps
  )(Contact);
  </code></pre>