Allow arrow functions as properties in React Components using eslint

If you don’t configure your .eslintrc file, then you might see this “Parsing error: Unexpected token =” when you do the following in your react components.

class HomeComponent extends Component {
  
  state = {
    term: '',
  };

  setTerm = (term) => {
    this.setState({ term });
  };

  ...
}

To use arrow functions as properties in React components you can do the following.

Install

Install the required dev dependencies for the eslint plugin and airbnb’s configuration

npm --save-dev i eslint babel-eslint eslint-plugin-react eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y

Configure

.eslintrc

{
  "extends": "airbnb",
  "parser": "babel-eslint"
}

Over riding the rules

.eslintrc

{
  "extends": "airbnb",
  "parser": "babel-eslint",
  "rules": {
    "react/sort-comp": 0,
    "react/prop-types": 0,
    "no-useless-escape": 1,
    "max-len": [1, 151],
    "react/jsx-filename-extension": 0,
    "no-unused-vars": [1],
    "import/prefer-default-export": 1,
    "import/no-extraneous-dependencies": 1,
    "import/no-unresolved": 1,
    "jsx-a11y/label-has-for": 1,
    "jsx-a11y/anchor-is-valid": 1
  }
}