Unexpected block statement surrounding arrow body arrow-body-style

[svox1]

What version of ESLint are you using?
2.3.0

What configuration and parser (Espree, Babel-ESLint, etc.) are you using?
Babel-Eslint version babel/babel-eslint#d2f90c7239e152b8994f250c69c83604cde93292 (from 07 march 2016, need this commit for fix 'estraverse-fb')

What did you do? Please include the actual source code causing the issue.

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

Error:
1:28 error Unexpected block statement surrounding arrow body arrow-body-style

I cant remove the { } after removing the 'return' because I want to response a object: { }

What did you expect to happen?

No error message with the default setting 'as-needed'

[platinumazure]

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

[ilyavolodin]

Sorry, pressed wrong button.

[michaelficarra]

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

[ilyavolodin]

@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.

[svox1]

Ok thx

[teameh]

@platinumazure Thanks! I've added your example to the docs https://github.com/eslint/eslint/pull/6242/files \0/

[mgenev]

what about this React code?

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

I get the error, but I have no clue how to rewrite it...

[mysticatea]

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

[JeffBaumgardt]

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()
                    }
                })
            })
        })
    }

[platinumazure]

@Medros Please stop by in the Gitter chat to discuss. (And please include info about what errors you're getting and on which lines!) Thanks!

[lucasbento]

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

[michaelficarra]

@lucasbento

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

[lucasbento]

@michaelficarra oh, nice, thank you!

[coljung]

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

[grantgeorge]

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

[not-an-aardvark]

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.

[alexanderkartavtsev]

@not-an-aardvark thank you for pointing that out. but is there a way to find the exact version when it's been added?

[platinumazure]

@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.

[josephrexme]

@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(() = (...))
);

[Borkes]

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'

[albert-olive]

What about this:

jest.mock('material-ui/Dialog', () => { // Unexpected block statement... (arrow-body-style)
  return ({ children }) => { // Unexpected block statement... (arrow-body-style)
    return <div>{children}</div>;
  };
});

[josephrexme]

@albert-olive try

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

[Badbreaddead]

What should I do with this piece of code inside jsx?

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

[josephrexme]

@Badbreaddead this should work:

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

[Badbreaddead]

@bl4ckdu5t Sorry, didn't quite catch what you meant by ()...

[josephrexme]

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

[anderson-dan-w]

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.