Are parentheses required on return in JSX?

SitePoint Library Your First Week With React, 2nd Edition
1

I am learning React and following the introduction to JSX. In one of the first examples it has:

return ( message )

Is this the same as:

return message


Sorry if this is a beginner question but it looked odd and I'm not sure what the ( )'s do...if anything.


Link to content: Your First Week With React, 2nd Edition - Section 1

1 Like
2

Hi,

In this example you could omit the parentheses and the example would still work. If you were returning mutiple lines it would also work but might start to not look good and be easy to follow for example:

export default function App() {
  
  return  <div>
      <h1>I'm a heading </h1>
      <h2>Another</h2>
  </div>
}

So in this case might be better:

export default function App() {
  
  return  (
    <div>
        <h1>I'm a heading </h1>
        <h2>Another</h2>
    </div>
  )
}

This is why a lot of people use something like https://prettier.io/ so you don’t have to think about this it will do it for you.

3 Likes