Why does Map have a return statement in this example?

Question

Learning React and trying to cheat off this codepen. I do not understand 2 things about the map function in FormCard.

Why does this .map function have a return statement, I did not see a return on other examples
Why does the arrow function use curly braces instead of parentheses like the previous arrow function

const FormCard = (props) => (

  const FormCard = (props) => (
  <div>
    {
      DATA.map((props) => {
        return <div style={{...largebox, ...flex}} key={props.id}>
          <div style={{...Photo,backgroundImage: `url(${props.photo})`}}></div>
          <div>
            <Author author={props.author}/>
            <Something bio={props.bio}/>
            <AdBox adpic={props.adpic} />
            <IconBox />
          </div>
      </div>
      })
    }
  </div>
)

All `map` callbacks have a return statement. Those who doesn't are probably using the **impicit `return`** of the arrow functions. — ibrahim mahrir, Aug 25 '18 at 17:57
Hints: Read [Arrow function](http://exploringjs.com/es6/ch_arrow-functions.html) chapter. — Arup Rakshit, Aug 25 '18 at 18:01
There's really no good reason. On the contrary, the code you posted uses a very inconsistent style. — Bergi, Aug 25 '18 at 18:41

score 8 · Accepted Answer · answered Aug 25 '18 at 18:07

These are two different ways of returning from arrow functions.

The implicit return:

If the body starts with an expression and not with a { is seen as a value to be returned.

[0,1,2,3,4,5,6].map(v => ({value:v})); // gives an array of objects with value set to v. 
[0,1,2,3,4,5,6].map(v => v*v)// gives an array of squares of the initial array.

the explicit return:

If the body starts with a {, it seen as the body of the function, and a return statement is expected to return.

[0,1,2,3,4,5,6].map(v => { return {value:v}}); // gives an array of objects with value set to v. 
[0,1,2,3,4,5,6].map(v => { return v*v})// gives an array of squares of the initial array.

this answer makes the relevant distinction for flavors of arrow functions: expressions vice functions. — radarbob, Aug 25 '18 at 18:37

score 4 · Answer 2 · answered Aug 25 '18 at 18:03

4

Generally,

array.map((arg) => { return actionWith(arg) })
array.map((arg) => actionWith(arg))

Are equal, thus developers shrink their functions if they have returns only

answered Aug 25 '18 at 18:03

Alex Antonov

14,134
7
65
142

Why does Map have a return statement in this example?

2 Answers2

Linked