0

I generally understand how ES6 function arrows work. I also understand that at times parentheses can be used to implicitly return an object. However, in terms of React/JSX, are the parentheses necessary in the following?

class Contactlist extends React.Component {

    render() {

    const people = [
      { name: 'Tyler' },
      { name: 'Karen' },
      { name: 'Richard' }
    ]

    return <ol>
      { 
        people.map(
            // are the parentheses necessary here??
            person => (<li key={person.name}>{person.name}</li>)
        )
      }
    </ol>

    }
}

Or is it simply okay to do the following?

...
return <ol>
  {
      people.map(
          person => <li key={person.name}>{person.name}</li>
      )
  }
</ol>
...

So, I guess what I should really be asking about is whether jsx elements are considered js objects. If so, then the parentheses are probably being used to implicitly return them from the fat arrow function.

Grateful
  • 9,685
  • 10
  • 45
  • 77
  • Technically this has nothing to do with React, the code you're asking about is just vanilla Javascript - a basic map function. And the rule is: with only one parameter the parentheses are optional. With 2 or more you need them – Jayce444 Dec 10 '20 at 07:20
  • 1
    Both are correct. Ideally, you should have a standard (project wide) linter that fixes these styles for you and keeps it consistent. Use Prettier or something like that. It will make sure code styling is consistent irrespective of developers personal preference – Nishant Dec 10 '20 at 07:22
  • @Jayce444 Thank you... But I was talking about function body, NOT the parameters. In this case, I am pretty new to React and JSX and therefore was not sure if these JSX elements are considered to be js objects. So, my question actually does go back to React/JSX. – Grateful Dec 10 '20 at 07:31
  • @Nishant Thank you so much for your time. However, my question is not about code formatting. Also, linters will help me with syntax errors, not logical errors. Many a time, syntactically a code is fine, but logically it is flawed... Here, since I am not completely familiar with React/JSX way of doing things, I wasn't sure if there was more going than what met the eyes. – Grateful Dec 10 '20 at 07:33
  • Does this answer your question? [Why is it best practice to surround JSX assigned to variables with parenthesis?](https://stackoverflow.com/questions/51427597/why-is-it-best-practice-to-surround-jsx-assigned-to-variables-with-parenthesis) – jonrsharpe Mar 17 '21 at 08:23

1 Answers1

0

It's absolutely okay not to use parentheses for this case.

return <ol>
  {
      people.map(
          person => <li key={person.name}>{person.name}</li>
      )
  }
</ol>

A good practice is to use parentheses only around multiline JSX. So in your case, you need to wrap JSX inside return in parentheses and you can skip wrapping in parentheses JSX inside map function.

return (
    <ol>
        {
            people.map(
               person => <li key={person.name}>{person.name}</li>
            )
        }
    </ol>
);
kyivcoder
  • 71
  • 3