How to Use Fragments in React

You can run into a scenario where you want something to return multiple elements. However, in React your components have to return a single element.

Traditionally, if you wanted to return a list of elements, this would force you to wrap the list in an extra DOM element.

Fragments give us an element we can use to wrap lists, and they don't output extra content in the DOM. They look like this.

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

The <React.Fragment> object lets you meet the requirement that a single object is returned, yet when rendering the DOM results in only rendering the list of children it contains.

Why Do We Need Fragments?

Here's a scenario where Fragments really solve a problem. Let's say we are rendering a table. The <table> block contains rows and columns.

How to Learn AWS
How to Learn AWS
Learn AWS the easy way, become a leader on your team.
How to Learn AWS
LEARN MORE

In React we might try to generate a row in the table, but this would result in invalid HTML since a <div> element cannot wrap those table elements.

render() {
    return (
      <div>
        <td>Column 1</td>
        <td>Column 2</td>
      </div>
    );
  }

The invalid HTML would look something like this:

<table>
  <tr>
    <div>
      <td>Column 1</td>
      <td>Column 2</td>
    </div>
  </tr>
</table>

Instead of wrapping those columns in a <div> we can use Fragments!

render() {
  return (
    <React.Fragment>
      <td>Column 1</td>
      <td>Column 2</td>
    </React.Fragment>
  );
}

This would output clean and valid HTML.

<table>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
  </tr>
</table>

Mapping with Fragments

Another use case for wrapping lists of components is inside of a loop. For example, when mapping through a list of rows you can wrap the output in a Fragment instead of an unnecessary DOM element.

{rows.map(row => (
  <React.Fragment key={row.id}>
    <dt>{row.name}</dt>
    <dd>{row.score}</dd>
   </React.Fragment>
  )
)}

Short Hand Fragments

Fragments get even better. As long as you don't need to add attributes, like a key or other props, you can use the shorthand syntax.

This makes it even faster to adjust your code such that you can return lists of elements without having to add additional DOM boilerplate code.

render() {
  return (
    <>
      <td>Column 1</td>
      <td>Column 2</td>
    </>
  );
}

Fragments are a great solution that allow you to return lists of components when needed, without adding boilerplate to the DOM. Clean up your DOM with React Fragments!

Featured
Level up faster
Hey, I'm Nick Dill.

I help people become better software developers with daily tips, tricks, and advice.
Related Articles
More like this
How to Beat the Technical Interview
How to Use State Hooks in React