Arrow function without curly braces

I’m new to both ES6 and React and I keep seeing arrow functions. Why is it that some arrow functions use curly braces after the fat arrow and some use parentheses?
For example:

const foo = (params) => (
    <span>
        <p>Content</p>
    </span>
);

vs.

  • When should I use Arrow functions in ECMAScript 6?
  • How do I write a named arrow function in ES2015?
  • Using _ (underscore) variable with arrow functions in ES6/Typescript
  • Can I use arrow function in constructor of a react component?
  • What are the key differences between ES6 arrow function and the CoffeeScript fat arrow function?
  • Do ES6 arrow functions have their own arguments or not?
  • const handleBar = (e) => {
        e.preventDefault();
        dispatch('logout');
    };
    

    Thanks for any help!

  • How do I write an arrow function in ES6 recursively?
  • Arrow function “expression expected” syntax error
  • Arrow Function in Object Literal
  • SyntaxError: invalid arrow-function arguments (parentheses around the arrow-function may help)
  • Referencing `this` in React JSX
  • ES6 arrow functions not working on the prototype?
  • One Solution collect form web for “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 nothing
    const y = () => ({}) // returns an object