title: ESLint eslint-plugin-react arrow functions
body: <p>I'm having some trouble with ESLint and arrow functions in a react component using the <code>eslint-plugin-react</code> plugin. I just did these commands:</p>
  
  <ol>
  <li><code>npm i -g eslint eslint-plugin-react</code></li>
  <li><code>eslint SignUpPage.jsx</code></li>
  </ol>
  
  <p>And here is SignUpPage:</p>
  
  <pre><code>/**
   * Created by jwilso37 on 4/5/2017.
   */
  
  import React from 'react';
  import SignUpForm from '../components/landing/SignUpForm.jsx';
  import 'whatwg-fetch'
  
  
  class SignUpPage extends React.Component {
  
      constructor(props) {
          super(props);
  
          this.state = {
              errors: {},
              user: {
                  email: '',
                  name: '',
                  password: ''
              }
          };
      }
  
      /**
       * Change the user object.
       *
       * @param {object} e - the JavaScript event object
       */
  
      changeUser = (e) =&gt; {
          const field = e.target.name;
          const user = this.state.user;
          user[field] = e.target.value;
  
          this.setState({
              user
          });
      };
  
      /**
       * Handles processForm event and submits request to server.
       * @param e
       */
      processForm = (e) =&gt; {
          e.preventDefault();
          const form = document.querySelector('form');
          const formData = new FormData(form);
  
          fetch('/api/signup', {
              method: 'POST',
              body: formData
          }).then(response =&gt; {
              if (response.ok) {
                  this.setState({
                      errors: {}
                  });
              }
              else {
                  // returned &gt; 300 status code
                  response.json().then(j =&gt; {
                      const errors = j.errors ? j.errors : {};
                      errors.summary = j.message;
                      this.setState({
                          errors: errors
                      })
                  })
              }
          })
      };
  
  
      /**
       * Render the component.
       */
      render() {
          return (
              &lt;SignUpForm
                  onSubmit={this.processForm}
                  onChange={this.changeUser}
                  errors={this.state.errors}
                  user={this.state.user}
              /&gt;
          );
      }
  
  }
  
  export default SignUpPage;
  </code></pre>
  
  <p>But the output of eslint is oddly this:</p>
  
  <pre><code>ubuntu@ETFly:/vagrant/client/src/containers$ eslint signuppage.jsx
  
  /vagrant/client/src/containers/signuppage.jsx
    31:16  error  Parsing error: Unexpected token =
  </code></pre>
  
  <p>Saying that the <code>=</code> sign on the <code>changeUser</code> anonymous function is an error? Here's my <code>.eslintrc.json</code>:</p>
  
  <pre><code>{
    "plugins": [
      "react"
    ],
    "settings": {
      "react": {
        "createClass": "createClass", // Regex for Component Factory to use, default to "createClass"
        "pragma": "React",  // Pragma to use, default to "React"
        "version": "15.0" // React version, default to the latest React stable release
      }
    },
    "parserOptions": {
      "sourceType": "module",
      "ecmaVersion": 6,
      "ecmaFeatures": {
        "jsx": true
      }
    },
    "extends": ["eslint:recommended", "plugin:react/recommended"],
    "env": {
      "browser": true
    }
  }
  </code></pre>