Eslint arrow-body-style error in react.js

Question

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

Answer 1

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>