Unexpected block statement surrounding arrow body
ReactjsEcmascript 6EslintReactjs 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:
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
}
};