Unexpected block statement surrounding arrow body

Question

This is likely trivial but I've spent an abnormal amount of time trying to figure out why I get this "Unexpected block statement surrounding arrow body " error for the code below

computed: {
  filteredItems() {
    return this.items.filter((item) => {
      return (item.type.toLowerCase().indexOf(this.search.toLowerCase()) > -1);
    });
  },
},

Possible duplicate of [ESLint Airbnb ES6 and Redux Async Action Unexpected block statement surrounding arrow body](https://stackoverflow.com/questions/37474957/eslint-airbnb-es6-and-redux-async-action-unexpected-block-statement-surrounding) — Oluwafemi Sule, Sep 19 '17 at 19:56

Rowland · Accepted Answer · 2017-09-19T20:08:59.713

This is based on your ESLint configuration. So, since arrow function does implicit return, you don't need a return statement for your code.

The open braces after the arrow function immediately indicate a new block which should be more than a sentence but not so in your own case.

// Fix for your code

computed: {
  filteredItems() {
   return this.items.filter((item) => 
   (item.type.toLowerCase().indexOf(this.search.toLowerCase()) > -1));
  }
},

score 0 · Answer 2 · answered Sep 19 '17 at 19:54

If in an arrow function all you do is return something then you can do the following:

const someFunction = item => item.someReturnValue;

So, in your case it is asking you to do the following:

return this.items.filter((item) => (item.type.toLowerCase().indexOf(this.search.toLowerCase()) > -1);

As you can see in my first example, you can also lose the brackets arounding the arguments if only one is required.

If you want to see some further examples then you can take a look at the MDN Arrow Functions page.

Unexpected block statement surrounding arrow body

2 Answers2