Render Multiple Elements without a Wrapping Element in a Component in React 16
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.
Here you can see an app rendering a list of fruits. In React 16, it's now possible to extend this list with a component containing multiple new entries. Let me demonstrate this by creating a function component, fruits, a simple transitive array of multiple list elements.
We rendered the component inside the unordered list, and as you can see, all fruits show up. When expecting the DOM, we can see all of them are rendered inside the same unordered list element.
Of course, rendering the list inside a class component also works. We add a component, moreFruits, and render two more fruits. One notable thing to mention here is that I use the same keys in the fruits as well as in the moreFruits component. Although they end up in the same DOM element, this works fine without any key warning shown in the console.
All right, so far, so good. One more feature of React 16 is that you can also return the past children themselves without a wrapping element. Let's create a component named aux. It just returns props.children.
We can use this component, for example, to wrap all the list entries in our fruits component. This way, you don't need to use commas to render multiple elements, but the result will be exactly the same in the DOM.
These new possibilities allow you to create new component libraries that were impossible before. For example, you could create a table library where you have various components to render different kind of rows based on the same data set. I prepared a couple of components to demonstrate this. First, we have to import them.
Then we create the data set. We add a table with a table body. Now, for example, render the raw data using the raw rows component. If you want to know the sum, we simply append another row using the sum component.
As you see in the DOM, all rows are still listed in the same table body. Now, we can take this even further by using our statsRows component. This component renders the sum row as well as a trend row indicating the growth rate.
Now, let's have a look at the DOM. As you can see, we have multiple rows rendering the raw data. We have a sum row and we have the trend row, all in the same table body.