CODEWITHSUNDEEP
javascripteslint
maasha
maasha

Reputation: 1995

ESLint: Unexpected block statement surrounding arrow body. (arrow-body-style)

This rule, triggered by the below snippet of code, is most confusing (to me - and others it appears). If I remove the curlies, it breaks. If I add parens around the block, it breaks. What to do?

const MainLayout = (props) => {
  return (
    <div className="main">
      <Header />
      <Navbar />
      <Content>
        {props.children}
      </Content>
      <Footer />
    </div>
  );
};

This is ESLint v4.13.1

Upvotes: 2

Views: 9020

Answers (3)

thinkerBOB
thinkerBOB

Reputation: 176

Babel Extension

Remove the above extension from your VS Code editor issue will be soved

Upvotes: 0

Abdul Moiz
Abdul Moiz

Reputation: 317

you don't need retun just add ( instead of { . Like this...

const Card = props => (
  <View style={styles.containerStyle}>{props.children}</View>
);

Upvotes: 1

Barmar
Barmar

Reputation: 782785

if you're just returning a value immediately, you don't need a return statement in an arrow function. Just put the value directly after the arrow.

And when there's just a single argument, you don't need parentheses around the argument list.

const MainLayout = props => (
    <div className="main">
      <Header />
      <Navbar />
      <Content>
        {props.children}
      </Content>
      <Footer />
    </div>
  );

Upvotes: 13

Related Questions