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);
    });
  },
},

Answer 1

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));
  }
},

Answer 2

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.