<Fragment> (<>...</>)
<Fragment>
, often used via <>...</>
syntax, lets you group elements without a wrapper node.
<> <OneChild /> <AnotherChild /> </>
Reference
<Fragment>
Wrap elements in <Fragment>
to group them together in situations where you need a single element. Grouping elements in Fragment
has no effect on the resulting DOM; it is the same as if the elements were not grouped. The empty JSX tag <></>
is shorthand for <Fragment></Fragment>
in most cases.
Props
- optional
key
: Fragments declared with the explicit<Fragment>
syntax may have keys.
Caveats
-
If you want to pass
key
to a Fragment, you can’t use the<>...</>
syntax. You have to explicitly importFragment
from'react'
and render<Fragment key={yourKey}>...</Fragment>
. -
React does not reset state when you go from rendering
<><Child /></>
to[<Child />]
or back, or when you go from rendering<><Child /></>
to<Child />
and back. This only works a single level deep: for example, going from<><><Child /></></>
to<Child />
resets the state. See the precise semantics here.
Usage
Returning multiple elements
Use Fragment
, or the equivalent <>...</>
syntax, to group multiple elements together. You can use it to put multiple elements in any place where a single element can go. For example, a component can only return one element, but by using a Fragment you can group multiple elements together and then return them as a group:
function Post() { return ( <> <PostTitle /> <PostBody /> </> ); }
Fragments are useful because grouping elements with a Fragment has no effect on layout or styles, unlike if you wrapped the elements in another container like a DOM element. If you inspect this example with the browser tools, you’ll see that all <h1>
and <article>
DOM nodes appear as siblings without wrappers around them:
Deep Dive
The example above is equivalent to importing Fragment
from React:
import { Fragment } from 'react'; function Post() { return ( <Fragment> <PostTitle /> <PostBody /> </Fragment> ); }
Usually you won’t need this unless you need to pass a key
to your Fragment
.
Assigning multiple elements to a variable
Like any other element, you can assign Fragment elements to variables, pass them as props, and so on:
function CloseDialog() { const buttons = ( <> <OKButton /> <CancelButton /> </> ); return ( <AlertDialog buttons={buttons}> Are you sure you want to leave this page? </AlertDialog> ); }
Grouping elements with text
You can use Fragment
to group text together with components:
function DateRangePicker({ start, end }) { return ( <> From <DatePicker date={start} /> to <DatePicker date={end} /> </> ); }
Rendering a list of Fragments
Here’s a situation where you need to write Fragment
explicitly instead of using the <></>
syntax. When you render multiple elements in a loop, you need to assign a key
to each element. If the elements within the loop are Fragments, you need to use the normal JSX element syntax in order to provide the key
attribute:
function Blog() { return posts.map(post => <Fragment key={post.id}> <PostTitle title={post.title} /> <PostBody body={post.body} /> </Fragment> ); }
You can inspect the DOM to verify that there are no wrapper elements around the Fragment children: