React: rendering components in a loop

Question

All the docs for map use braces but the code below and most examples I see when dealing with React use parenthesis. I'm trying to figure out exactly what the difference is and what the code is doing.

When using braces, nothing renders unless I specifically add return. So my take is that the parenthesis act as some sort of inline function that automatically returns or React converts the result and inlines it into the JSX?

// Renders fine
render()
{
   return (
      <div className="item-list">
         {
            this.props.items.map(
               ( _item, _index ) => (
               <ItemComponent
                  key={ _index }
                  name={ _item.name }
                  description={ _item.description }
               />
            ) )
         }
      </div>
   );
}

// Nothing
render()
{
   return (
      <div className="item-list">
         {
            this.props.items.map(
               ( _item, _index ) => 
               {
                  <ItemComponent
                     key={ _index }
                     name={ _item.name }
                     description={ _item.description }
                  />
               } )
         }
      </div>
   );
}

// Renders fine
render()
{
   return (
      <div className="item-list">
         {
            this.props.items.map(
               ( _item, _index ) => 
               {
                  return <ItemComponent
                     key={ _index }
                     name={ _item.name }
                     description={ _item.description }
                  />
               } )
         }
      </div>
   );
}

You are talking about function shorthand called arrow functions developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — Stretch0
– Stretch0, Commented Feb 28, 2018 at 13:40

Raja Jaganathan · Accepted Answer · 2018-02-28 13:46:51Z

1

Nothing to do with React, It is all about javascript

Curly braces saying it is a function body so we need to manually use return keyword

 this.props.items.map(
               ( _item, _index ) => 
               { // Note: represent function body, normal javascript function
                  <ItemComponent
                     key={ _index }
                     name={ _item.name }
                     description={ _item.description }
                  />
               } )

According to arrow functions, has implicit return behavior hence so need to mention explicitly if single line expression.

render()
{
   return (
      <div className="item-list">
         {
            this.props.items.map(
               ( _item, _index ) => ( // Note: single line expression, so impilicit;y return our ItemComponent
               <ItemComponent
                  key={ _index }
                  name={ _item.name }
                  description={ _item.description }
               />
            ) )
         }
      </div>
   );
}

edited Feb 28, 2018 at 13:46

answered Feb 28, 2018 at 13:40

Raja Jaganathan

36.8k4 gold badges34 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Serge K. Over a year ago

You forgot it in your answer.

Akhilesh krishnan · Accepted Answer · 2018-03-01 06:06:06Z

0

So parenthesis in an arrow function returns a single value, the curly braces are used when executing multiple lines of code and not just a simple return, so a manual return statement is required just because javascript can't know what among those lines to return.

materials.map(material => ({key:material.name}));

return an object

materials.map(material => {
   let newMat = material.name+'_new'; 
   return newMat;
});

we need to return since we are doing 1 or many lines of manipulation and trying to return end result

edited Mar 1, 2018 at 6:06

answered Feb 28, 2018 at 13:43

Akhilesh krishnan

7992 gold badges8 silver badges23 bronze badges

Collectives™ on Stack Overflow

React: rendering components in a loop

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related