What are React Fragments?

After reading this post you will know all the ins and outs of React Fragments, how to use them and why they are useful. I will also give you some use case examples along with code snippets.

React fragments allow you to return multiple elements within a component. You are able to list a group of children elements without adding an extra parent node to the DOM.

React components return a particular set of HTML elements using a technology called JSX (JavaScript XML). It doesn’t take long to discover that React will not just let you return a list of children elements.

A Hiking Example

Take this hiking blog post for example:

const Blog = () => {
    return (
            <h1>My favorite hiking trails</h1>
            <h3>Pikes Peek</h3>
            <h3>Grey Rock</h3>
            <h3>Red Rock Trail</h3>
    )
}
export default Blog

This component returns 4 elements:

One <h1> element

and

Three <h3> elements.

If you run this component you will see the compile error

JSX expressions must have one parent element

React requires that you wrap the children elements inside a parent element.

Many times this wrapper is a <div> element and in this use case a <div> element will fix the issue. One side effect of this approach is that the <div> element will be rendered respectively. This is fine in most cases but in some instances the <div> wrapper will not work as expected. I will give you an example of this soon. React Fragments solve this problem. Here is the same blog component using a React Fragment:

const Blog = () => {
    return (
        <React.Fragment>
            <h1>My favorite hiking trails</h1>
            <h3>Pikes Peek</h3>
            <h3>Grey Rock</h3>
            <h3>Red Rock Trail</h3>
        </React.Fragment>
    )
}
export default Blog

The Blog component will render this markup to the browser after JSX does its magic:

<h1>My favorite hiking trails</h1>
 <h3>Pikes Peek</h3>
 <h3>Grey Rock</h3>
 <h3>Red Rock Trail</h3>

Notice that the JSX tag <React.Fragment> is not present in the final result.

Why are React Fragments useful?

Besides resolving the error mentioned above, React Fragments are particularly useful when you are working with a component that must include multiple elements in order to have valid HTML. Take for instance an HTML Table element. Here is a simple table I found on MDN:

<table>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

A Columns Component

Let’s say that we need the columns in this table to be able to have dynamically different content based on an API response. Therefore, requiring the columns of this table to live in their own component. I’ll call this component Columns. Below are the Table and Columns component. Don’t worry about the columns being dynamic just yet. We’ll come back to that:

function Table() {
    return (
        <table>
            <tr>
                <Columns />
            </tr>
        </table>
    )
}
export default Table

function Columns() {
    return (
        <div>
            <td>John</td>
            <td>Doe</td>
        </div>
    )
}
export default Columns

The Columns component satisfies React’s JSX requirement of only one parent element allowed. Now we have a different problem. This is not valid HTML because only <td> and <th> are valid inside a <tr> element. The <div> element that is encapsulating the table data elements <td> has got to go! React fragments to the rescue! Here is my updated Columns component:

function Columns() {
    return (
        <React.Fragment>
            <td>John</td>
            <td>Doe</td>
        </React.Fragment>
    )
}
export default Columns

Life is good. We have satisfied both the JSX requirement and the HTML requirement so the component will now be rendered.

Keyed Fragments

If you are new to React, and don’t know about the benefits of using keys, I recommend you take some time and look at this article to learn about Keys. Fragments can be used with keys to keep the performance we all enjoy. Here I will use the blogging example again to illustrate:

const Blog = props => {
  return (
      <h1>My favorite hiking trails</h1>
      {props.items.map(item => (
        // Here we give the fragment a unique key
        <React.Fragment key={item.id}>
          <h3>{item.name}</h3>
          <h3>{item.description}</h3>
        </React.Fragment>
      ))}
  );
}
export default Blog

Is there an easier way? A shorter way?

Yes there is a short syntax for React Fragments. This syntax is <></>. Let’s use the short syntax in our dynamic Column component:

function Columns(props) {
    return (
        <>
            {props.items.map(column => (
                <td>{column.name}</td>
            ))}
        </>
    )
}
export default Columns

One limitation to keep in mind with the short syntax: the short syntax does not support keyed fragments. Fortunately, the long syntax does. One important point to make is that the Key attribute is the ONLY attribute that can be passed into a React Fragment.

Conclusion

In conclusion, I have explained what React fragments are and how they are useful, specifically, when you are working with tables whose columns need to be dynamic. We also touched on using the short syntax. Like they say in create-react-app: Happy Hacking!