Using Fragments in React Containers

When building React applications, we often encounter scenarios where multiple components need to be rendered together, but without a single parent element wrapping them all. This is particularly challenging when working with lists and fragments. In this article, we'll explore how to use React fragments in container components, specifically in the context of rendering a list of items.

Bootstraping Our Page Layout

Let's begin by creating a simple React application using Bootstrap. We have two child components: `PublicListItems` and `PrivateListItems`. Our App component renders three div elements with class names that should be familiar to those who are well-versed in Bootstrap. These divs will serve as the foundation for our list of items.

Components and Containers

Our application is comprised of three React components: `App`, `PublicListItems`, and `PrivateListItems`. The `App` component is a container component that encapsulates our entire React application, rendering both `PrivateListItems` and `PublicListItems` as child components. The `PrivateListItems` component will render private items, while the `PublicListItems` component will render public items.

Rendering Multiple Elements

Imagine we want to render a list of items in our React app. We could wrap all three list items in one parent element and return that element instead. However, this approach would break our ul list, as the rule is that a render() method in a React component must return only one element.

The Need for Fragments

In React 16, we face the challenge of rendering multiple elements without wrapping them in a single parent element. This is where React fragments come into play. We can use fragments to wrap multiple elements together and return them as a single element.

A Simple Example

To demonstrate this concept, let's consider Figure 1. Our question is: how can we render three li elements without rendering a parent element? Using fragments, we can achieve this by wrapping all three li elements in one fragment and returning that fragment instead. This will allow us to keep our ul list intact.

In conclusion, React fragments provide us with the flexibility to render multiple elements together while adhering to the rule of returning only one element from a render() method. By using fragments in container components like our App component, we can create more robust and efficient React applications that render complex lists of items.

React fragment container