CODEWITHSUNDEEP
reactjsjsx
Kristoffer Tølbøll
Kristoffer Tølbøll

Reputation: 3357

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

Upvotes: 2

Views: 1380

Answers (1)

Estus Flask
Estus Flask

Reputation: 223318

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.

Upvotes: 4

Related Questions