How to fix a block statement from a eslint arrow body error?

Question

I have the following:

const MyPage = (props) => {
  return (
    <MyLayout {...props}>
      ...

I need to pass props to MyLayout, problem is eslint doesn't like this and is rejecting the code w:

unexpected block statement surrounding arrow body

How can I get the func to pass props and comply with eslint?

Thanks

Possible duplicate of [Eslint arrow-body-style error in react.js](https://stackoverflow.com/questions/42217761/eslint-arrow-body-style-error-in-react-js) — pwolaq, Feb 17 '18 at 18:44

eshunsharma · Accepted Answer · 2018-02-17T19:31:42.997

1

The problem is not with the props but around arrow body when you only have return inside it, you dont need to have curly brackets or return.

This will work.

const MyPage = (props) => <div>
<MyLayout {...props}>
.... 
</MyLayout>
<MyComponent />
</div>

edited Feb 17 '18 at 19:31

answered Feb 17 '18 at 18:41

eshunsharma

Thanks but I have content inside the – AnnaSm Feb 17 '18 at 19:24
your content... this will work, if you have content inside you need opening and closing brackets. Also if you have multiple lines, then enclose in a div. – eshunsharma Feb 17 '18 at 19:26
not sure what to say, it's still erroring in the editor w "missing parentheses around multiline JSX" – AnnaSm Feb 17 '18 at 19:28
@AnnaSm that error is because you are using multiple adjacent tags, enclose in divs. Let me update my answer to make it morr clear. – eshunsharma Feb 17 '18 at 19:30
sorry same message about missing parentheses around multiline JSX – AnnaSm Feb 17 '18 at 19:55
@AnnaSm can you update your question with the exact code, Instead of (...) . – eshunsharma Feb 17 '18 at 19:57

1 Answers1