Differences between curlybraces and parentheses wrapping in React or JSX

Question

Why in the start snippet below, the const user are wrapped in curly braces and the const element are wrapped in parentheses?

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

Answer 1

When you use:

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

You're using JSX, which offers a Javascript XML like language, it's like a pre-processor.

Otherwise, when you use:

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

You're creating a plain Javascript object, where you can store data and access it like user.firstName or user.lastName.

Answer 2

In first case:

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

user is an object with key: value pairs and hence {}

while in second case,

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

the multiline JSX expression in wrapped within () to add to the readability of the code, and as per the docs,

It is recommend to wrap it in parentheses to avoid the pitfalls of automatic semicolon insertion.