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

InstructorNik Graf

Share this video with your friends

Send Tweet

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
~ 6 years ago

() => [ ]

Is this a new syntax in arrow functions returning arrays?

Rajeev Mishra
~ 6 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
~ 6 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 Grafinstructor
~ 6 years ago

thanks for replying here @Melissa