We create presentational component or stateless component like this

```
const MyComponent = () => {
   return(<div>my component</div>)
}

```

but I'd seen this

```
const MyComponent = () =>
   <div>
     <h1>head</h1>
     my component
   </div>

```

so now I'm confused when the braces is needed when using es6's arrow function.

This confused me on when rendering a list using map

shorter version

```
<div>
{map(o => 
   <div>{o.name}</div>
)}
</div>

```

longer version

```
<div>
    {map(o => {
     return(<div>{o.name}</div>)
     })}
</div>

```

Both are correct, but why write longer?