Difference between {} and () with .map with Reactjs

Question

I've tried to search around on here and other places for some answers, but I can't seem to find anything. I'm going through a 'full stack react' PDF and in one example we build out a product list using .map(). But they use it like this:

const allNames = names.map((name) => (
   <Name key={name.name} name={name.name} />
));

Where I'm used to using it like this:

const allNames = names.map((name) => {
  <Name key={name.name} name={name.name} />
});

Using it the second way nothing is shown on the page. Why is this? I'm inclined to think it has something to do with the way the array of objects is stored in state. You can see the full code below. Thanks guys.

class Name extends React.Component {
  render() {
    return (
      <li>{this.props.name}</li>
    );
  }
}

class NameList extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      names: [
        {
          name: 'dan' 
        },
        {
          name: 'fred' 
        }
      ]
    }
  }
  
  render() {
    const { names } = this.state;
    const allNames = names.map((name) => (
      <Name key={name.name} name={name.name} />
    ));
    
    return (
      <div className='class-list'>
        {/*<NewName addName={this.addName} />*/}
        <ul className='new-name'>
          {allNames}
        </ul>
      </div>
    );
  }
}

class FilteredNameList extends React.Component {
  render() {
    return (
      <div>
        <NameList 
          names={this.props.names}
        />
        {/*<FilterNames />*/}
      </div>
    );
  }
}

ReactDOM.render(
  <FilteredNameList />,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="container"></div>

Answer 1

The difference is not related to react directly its ES6 Arrow functions syntax.

If you use regular parenthesis, it is equevalent to returning some value so

() => {return 'someValue';} 

is equal to

() => ('someValue')

---

(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
// equivalent to: (param1, param2, …, paramN) => { return expression; }

// Parentheses are optional when there's only one parameter name:
(singleParam) => { statements }
singleParam => { statements }

// A function with no parameters should be written with a pair of parentheses.
() => { statements }

// Parenthesize the body of function to return an object literal expression:
params => ({foo: bar})