-1

What is the difference between this two functions in React.js?

{muscles.map(group => { <Tab label={group} /> })}

And

{muscles.map(group => <Tab label={group} /> )}

2nd line works properly but first line does not render values.

mike_dz
  • 195
  • 3
  • 13

1 Answers1

3

The first line is a "multiline" arrow function. The code on the right side of => is a block. As such, if your want to return a value, you have to return it explicitly:

{muscles.map(group => {
   return <Tab label={group} />;
})}

The second is an abbreviated syntax when the expression on the right side of => is the return value of the function.

Sulthan
  • 128,090
  • 22
  • 218
  • 270
  • Great, thanks! Didn't know about that abbreviated syntax – mike_dz Aug 25 '18 at 18:01
  • 3
    I think calling it "multiline" might add to confusion. It's not about the number of lines, it's about the fact that `{}` is a block – loganfsmyth Aug 25 '18 at 18:10
  • @loganfsmyth good point. In essence this is just JS design decision. In other languages (e.g. Groovy) this would work too because a function always returns the result of last statement. – Sulthan Aug 25 '18 at 18:41