Making components with curly brackets versus parenthesis when using functional components

What is the difference between using curly brackets and parenthesis whne making functional components in JSX. I have a components called layout which displays props.children

But i want to know if there is a difference or a best practise between when to use what, and for what purpose.

const layout = (props) => {
<Aux>
<div>Toolbar, SideDrawer, Backdrop</div>
<main>
    {props.children}
</main>
</Aux>
}

versus

const layout = (props) => (
<Aux>
<div>Toolbar, SideDrawer, Backdrop</div>
<main>
    {props.children}
</main>
</Aux>
)

1 answer

  • answered 2018-11-08 07:44 estus

    Only the second snippet is correct. => (...) is implicit arrow function return. Parentheses are there for readability and consistency with multiline explicit return statement. It could be:

    const layout = (props) => 
      <Aux>
      ...
      </Aux>
    

    With proper indentation and no parentheses a hanging indent makes function harder to read.

    In order for the first snippet to work, there should be explicit arrow function return:

    const layout = (props) => {
      return (
        <Aux>
        ...
        </Aux>
      )
    }
    

    Notice that parentheses are needed if return and <Aux> are on different lines.