Using React Fragments

This tutorial is designed to help you understand React Fragments and various use cases where it would come in handy.

One of the advantages of using React to render a user interface is that it’s easy to break up the UI into components. However, a common problem that arises is when we want to return sibling elements with no parent. React has a feature called Fragments that provides the solution.

Learn how to use React Fragments let to group React elements, without requiring unnecessary markup or confusing key props.

How to use React.Fragment to create invisible HTML tags

In this post, we'll be looking at the rendering power React 16 introduced — namely, the ability to render children using Fragments and Array Components.

React v16 was a very exciting release for React, and included many new features. In the recent React 16.2 release, improved support for Fragments was announced, and it’s this feature that I want to talk about today.

React 16.2 is now available! The biggest addition is improved support for returning multiple children from a component’s render method. We call this feature fragments.

We’re excited to announce the release of React v16.0! Among the changes are some long-standing feature requests, including fragments, error boundaries, portals, support for custom DOM attributes, improved server-side rendering, and reduced file size.