Arrow function without curly braces

The parenthesis are returning a single value, the curly braces are executing multiple lines of code.

Your example looks confusing because it's using JSX which looks like multiple "lines" but really just gets compiled to a single "element."

Here are some more examples that all do the same thing:

const a = (who) => "hello " + who + "!";const b = (who) => (    "hello " +     who +     "!");const c = (who) => {  return "hello " + who + "!";}; 

You will also often see parenthesis around object literals because that's a way to avoid the parser treating it as a code block:

const x = () => {} // Does nothingconst y = () => ({}) // returns an object

One can also use curly braces to prevent a single line arrow function from returning a value -- or to make it obvious to the next developer that a single line arrow function shouldn't, in this case, be returning anything.

For example:

const myFunc = (stuff) => { someArray.push(stuff) }const otherFunc = (stuff) => someArray.push(stuff)console.log(myFunc())    // --> logs undefinedconsole.log(otherFunc()) // --> logs result of push which is new array length

Actually in a briefcase when somebody uses braces in an arrow function declaration, it is equal to below:

const arrow = number => number + 1;|||const arrow = (number) => number + 1;|||    const arrow = (number) => ( number + 1 );|||const arrow = (number) => { return number + 1 };