Eslint arrow-body-style error in react.js

2
votes

Using Airbnb's eslint rules, I'm getting the following error in my react code but I'm not sure what's the error.

const Facebook = ({ appId, url }) => {
  return (
    <div className={styles.facebook}>
      <FacebookProvider appID={appId}>
        <EmbeddedPost href={url} width="auto" />
      </FacebookProvider>
    </div>
  )
}

Getting an error at the beginning of line 1 { bracket.

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

Tried wrapping the curly brackets with parenthesis brackets but in turn, another error appear around line 3 of <div>.

Parsing error: Unexpected token

1
javascriptreactjslinteslint
Are you wanting to create a function (Facebook) that takes one object argument (with properties appId and url) or two arguments, appId and url? - Phil
See github.com/eslint/eslint/issues/5498 - Phil
You can use eslint --fix to fix it automatically. - mysticatea

1 Answers

2
votes

Try removing the curly braces and the return as per the issue linked in the comment for your question:

const Facebook = ({ appId, url }) => 
    <div className={styles.facebook}>
        <FacebookProvider appID={appId}>
            <EmbeddedPost href={url} width="auto" />
        </FacebookProvider>
    </div>