eslint: Unexpected block statement surrounding arrow body arrow-body-style

If you wrap the object in parentheses, it will parse correctly and the rule won’t error:

this.post('/post', () => ({
        post: {
            foo: 1,
            bar: 2,
        },
    });

const reactComponents = this.props.articles.map((article, i) =>
    <Item
      article={article.data}
      key={i}
      onChange={this.props.onChange}
    />
);

@michaelficarra is right. This is intended behavior. If return is the only statement inside the body of an arrow function, you do not need block statement. @platinumazure provided an example of valid code for this case. Closing, because this is working as intended.

@lucasbento

const productsReduced = products.reduce((prev, curr) => prev.concat(curr.product), []);

@JeffBaumgardt if that’s still an issue for you. Change the curly braces to parentheses. i.e

changeSite: () => (
    SystemJS.import('app/lib/components/sites-list/sites-list.js')
    .then(() = (...))
);

I had a bunch of these in my express app when returning function calls. Hope this clarifies for some people.

As the rule states:

Arrow functions have two syntactic forms for their function bodies. They may be defined with a block body (denoted by curly braces) () => { ... } or with a single expression () => ..., whose value is implicitly returned.

Keep in mind that a function can be this “value” that’s implicitly returned. In general, you can just nuke the braces and the return.

Ex:

.then(() => {
  return Model.create({
    name,
    date
  });
})

becomes

.then(() => Model.create({
  name,
  date
}))

For what it’s worth, arrow-body-style is autofixable as of a couple months ago, so if you run eslint --fix then ESLint will fix this issue for you.

@Badbreaddead this should work:

{
  profile.user_metadata.backendUrlVariants
  ? profile.user_metadata.backendUrlVariants.map((url, i) => (
       <MenuItem key={i} value={url} primaryText={url}/>
     ))
  :  null
}

@albert-olive try

jest.mock('material-ui/Dialog', () => (
  ({ children }) => (
    <div>{children}</div>
  );
));

Sorry to bump this again, but after trying the multiple suggestion here, i’m still unable to make the error go away, this is my code:

const SortableItem = new SortableElement((processor) => {
    return (
        <Row key={processor.id}>
            ....
        </Row>
    );
});

EDIT: Figured out i had to remove the ‘return’ as im returning a single expression

I feel like the earliest comments (i.e. the ones people see when the first show up at this page looking for help) should be edited or something to be clearer: the issue is that an anonymous function containing only a return can *remove the { return …} portion. There’s like 7 other people asking for help because they don’t get it because it isn’t clear (early on this thread) that the advice is to remove the word return.

What about arr.reduce()? How can we fix this so ESLint does not claim it’s wrong?

const productsReduced = products.reduce((prev, curr) => {
  return prev.concat(curr.product);
}, []);

@ilyavolodin No, it was the right button. This is not a bug.

I see you edited your question @Badbreaddead so I’ve edited my answer to reflect how you’d write that to prevent being stopped by the rule

so, if return is just an object, you do not need block statement. and if return is just a statement, you do not need ‘return’

@alexanderkartavtsev The fixer was added in ESLint 3.9.0.

I found this by opening the rule file, using “Blame” to find the commit which introduced the fixable: "code" line, and then GitHub told me that the nearest tag after that commit was for 3.9.0. I confirmed this by reading the release notes for 3.9.0.

I know this is closed but I was hoping someone could help with my issue. I don’t know what to do to fix it. As soon as I try one thing I get a different error.

changeSite: () => {
        return SystemJS.import('app/lib/components/sites-list/sites-list.js')
        .then((SitesList) => {
            return SitesList.prepareList()
            .then(() => {
                SitesList.init({
                    forceShow: true,
                    createLink: Navigation.buildPath('admin/site-creation'),
                    dialog: {
                        modal: false,
                        dialogClass: 'dialog-no-padding dialog-no-title caseSelectionDialog',
                        position: { my: 'left top', at: 'left bottom+1', of: $('#case_selection') }
                    }
                })
                .then((caseID) => {
                    if (caseID) {
                        // Halt navigation to prevent partial loading.
                        Navigation.uninit()
                        // Navigate to the new site path.
                        var root = Session.inGlobalAdmin ? 'global-admin' : 'site'
                        Navigation.go([ root, caseID ], 0)
                        // Reload the window to actually get the new site.
                        window.location.reload()
                    }
                })
            })
        })
    }