Unexpected block statement surrounding arrow body

ReactjsEcmascript 6Eslint

Reactjs Problem Overview


I'm using "eslint-config-airbnb": "^6.1.0", to keep my JavaScript clean.

My linter is unhappy with what seems to be legitimate code:

enter image description here

It seems like this might be an ongoing issue. Does anyone have any suggestions for an OCD developer on how to address this in the meantime? Perhaps disabling this rule or otherwise?

Reactjs Solutions


Solution 1 - Reactjs

The block statement isn't needed for a single expression.

this.state.todos.filter(filterTodo => filterTodo !== todo);

Solution 2 - Reactjs

To add on Kevin answer, the error is related to your eslint configuration. This said, if arrow-body-style option is set to true, OP is correct. An other example would be something like this :

    return this.state.greetings.map((name) => {
        return <HelloWorld key={name} name={name} />;
    });

Without arrow-body-style option, block statement ( { return ...} ) is not needed as per Kevin answer.

This actually open a new question as to which style is more appropriate.

For further references : http://eslint.org/docs/rules/arrow-body-style

Solution 3 - Reactjs

If you really don't want to wrap arrow function inside block statement then you can turn off.

module.exports = {
  extends: "airbnb-base",
  rules: {
    "arrow-body-style": 0
  },
  "env": {
    "jest": true
  }
};

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionilreinView Question on Stackoverflow
Solution 1 - ReactjsKevin BView Answer on Stackoverflow
Solution 2 - ReactjsPobeView Answer on Stackoverflow
Solution 3 - ReactjsSagarView Answer on Stackoverflow