ESLint error Unexpected block statement surrounding arrow body

Question

I am using ESlint in my project. I am getting the error ** Unexpected block statement surrounding arrow body** from this function

const toggleDrawer = (state) => {
 return {
 ...state,
 drawerExpanded: !state.drawerExpanded,
 };
};

Can anyone suggest me how to handle this ESlint error?

See https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Returning_object_literals. — , Mar 30 '17 at 06:08
Possible duplicate of [ECMAScript6 arrow function that returns an object](http://stackoverflow.com/questions/28770415/ecmascript6-arrow-function-that-returns-an-object) — , Mar 30 '17 at 06:09

score 1 · Answer 1 · edited Mar 30 '17 at 16:45

1

Wrap the object in parenthesis ()

const toggleDrawer = (state) => ({
 ...state,
 drawerExpanded: !state.drawerExpanded,
});

Also check if you have : arrow-body-style: ["error", "as-needed"] in es-lint

edited Mar 30 '17 at 16:45

loganfsmyth

answered Mar 30 '17 at 05:11

Nishanth Matha

did you try setting `arrow-body-style: ["error", "as-needed"]` in es-lint?? – Nishanth Matha Mar 30 '17 at 05:25
1

Adding arrow-body-style: ["error", "as-needed", { "requireReturnForObjectLiteral": true }] fixed. – scn Mar 30 '17 at 05:43

1 Answers1