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

Question

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

Answer 1

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

Answer 2

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

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