React Fragments in Practice – 4 real-world examples

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

23rd January, 2019

When working with React, there are times when you’ll want to pass around groups of React elements. And while it used to be that doing so required you to add useless container components or confusing arrays, React solved this last year by introducing Fragments — a simple way to group elements without adding any extra markup.

index.js

index.html

ReactDOM.render(
<ul>
<React.Fragment>
<li>The fragment element is not rendered to the DOM.</li>
<li>
You can confirm this by right clicking on one of these items
in the preview pane, and inspecting the markup in the browser
dev tools.
</li>
</React.Fragment>
</ul>,
document.querySelector("#root")
)

Build In Progress

React.Fragment — as used in the above example — is like a markupless component. When rendered to the DOM, its children will be rendered by themselves, making it possible to pass around groups of elements without introducing unnecessary markup. Fragments are also great for working with table and list markup (like the above), where it’s just not possible to add an extra <div>.

After using fragments for a while, you may run into an eensy-weensy issue: typing out <React.Fragment> is bothersome compared to typing <div>. And while this won’t get in the way when fragments are truly necessary, it certainly can slow down adoption. Which is why, I suppose, fragments also come with a concise new syntax:

index.js

index.html

ReactDOM.render(
<>
<h1>Yo Dawg,</h1>
<p>
I heard you like fragments so
I <>put a <>fragment</> in your fragment</>.
</p>
</>,
document.querySelector("#root")
)

This file type is not compiled.

Build In Progress

As you can see, the <> and </> tags in JSX now correspond to <React.Fragment> and </React.Fragment>. There’s nothing else special about them — they compile down to the same thing as any other React element, with a type of React.Fragment:

Fragments have now had plenty of time for them to make their way into real world codebases. I’ve taken a look through a few open source projects to see how Fragments are being used in practice — and found a number of common use cases:

You can use fragments to create components that return a list of elements without wrapping them in a container or array. This is useful for components that return form and text markup — as wrapping the result in a container <div> can cause headaches when styling things.

Spectrum's source frequently uses fragment-returning components for this purpose. For example, take a look at the e-mail confirmation component:

classUserEmailConfirmationextendsReact.Component{render(){const{ emailError, email, isLoading }=this.state;const{ user }=this.props;return(<React.Fragment><EmailFormdefaultValue={email}loading={isLoading}onChange={this.handleEmailChange}onSubmit={this.init}style={{ marginTop:'8px', marginBottom:'8px'}}/>{user.pendingEmail &&(<Notice> A confirmation link was sent to {user.pendingEmail}. Click the confirmation link and then return to this page. You can resend the confirmation here, or enter a new email address.</Notice>)}{emailError &&<Error>{emailError}</Error>}</React.Fragment>)}}

Spectrum was recently acquired by GitHub, but they’re still open source!

Fragments make it far easier to conditionally render whole groups of elements without adding unnecessary markup. For example, they can be used with the ternary operator to switch an element’s content depending on the value of a prop:

Fragments have one more powerful feature, which I’ve saved until last as it is rarely used. But when you do need this feature, it is invaluable:

Fragments can have key props!

<React.Fragmentkey='somevalue'>
...
</React.Fragment>

To specify a key for a fragment, you’ll need to use the standard JSX element syntax; you can’t use the new <></> syntax.

Why would you want to give a Fragment a key? Well, it allows fragments to be used as items in arrays. Which in turn makes it possible to splice elements into text — and all without introducing any unnecessary markup.

For example, the console view in Frontend Armory’s Demoboard editor uses keyed fragments to replace newline characters with <br> elements… and the resulting code is small enough that it would make for a great exercise!

See if you can use React Fragments to render the newline characters in the below string as <br> tags, without introducing any extra markup.

Once you’ve given it a try, you can take a look at my solution by clicking the Solution tab at the bottom of the editor.

index.js

index.html

let message = `
Hello, there!
HTML doesn't render new line characters by default,
but you can add them back in as <br> tags!
`
// You'll need to replace the line break characters in this string
// with `<br>` elements.
let messageWithLineBreaks = message
ReactDOM.render(
<div>{messageWithLineBreaks}</div>,
document.querySelector('#root')
)

Build In Progress

Thanks so much for reading! And if you know of any more uses for React Fragments, make sure to let everyone know in the twitter discussion!

Go Pro

Stay in the loop.

Keeping up to date with React is a full time job that pays only in frustration. Luckily, you can delegate! Just become a free member, and we'll keep you up to date with our monthly newsletter.