Render Multiple Elements without a Wrapping Element in a Component in React 16

React^16.0.0

Share this video with your friends

Until React 16 it was required that a render method returns a single React element. With React 16 it is possible now to return an Array of elements.

In addition creating self-eradicating component only rendering the children allow for a comfortable syntax. All in all this opens up new opportunities in component design and how they are nested which is demonstrated in this lesson.

Rajeev Mishra

~ 7 years ago

() => [ ]

Is this a new syntax in arrow functions returning arrays?

Rajeev Mishra

~ 7 years ago

I was referring to this code -

const Fruits = () => [

<li key="1">Apple</li>, <li key="2">Orange</li>, <li key="3">Banana</li> ];

Melissa Clausse

~ 7 years ago

() => [ ] Is this a new syntax in arrow functions returning arrays?

Yes, the return is implied, but it is the same as:

const Fruits = () => {
   return [
   ];
}

Nik Graf(instructor)

~ 6 years ago

thanks for replying here @Melissa