Using React Fragments

Fragments let you group a list of children without adding extra nodes to the DOM. More info

Articles & Tutorials

React Fragments: An overview (blog.logrocket.com)
Mar 17, 2021
This tutorial is designed to help you understand React Fragments and various use cases where it would come in handy.
  • Vijit Ail
Rendering sibling elements in React using Fragments (blog.logrocket.com)
Nov 26, 2019
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.
  • Danny Guo
React Fragments in Practice – 4 real-world examples (frontarm.com)
Jan 23, 2019
Learn how to use React Fragments let to group React elements, without requiring unnecessary markup or confusing key props.
The React Fragment (flaviocopes.com)
Oct 31, 2018
How to use React.Fragment to create invisible HTML tags
Render Children in React Using Fragment or Array Components (css-tricks.com)
Jul 17, 2018
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.
  • Kingsley Silas
Using React Fragments for the first time (javascriptplayground.com)
Dec 18, 2017
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 v16.2.0: Improved Support for Fragments (reactjs.org)
Nov 28, 2017
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.
  • Clement Hoang
React v16.0 (reactjs.org)
Sep 26, 2017
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.