20/02/2025, 09:02 <Fragment> (<>...
</>) – React
v19
API REFERENCE COMPONENTS
<Fragment> (<>...</>)
<Fragment> , often used via <>...</> syntax, lets you group
elements without a wrapper node.
<>
<OneChild />
<AnotherChild />
</>
Reference
<Fragment>
Usage
Returning multiple elements
Assigning multiple elements to a variable
Grouping elements with text
Rendering a list of Fragments
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.
https://react.dev/reference/react/Fragment 1/7
20/02/2025, 09:02 <Fragment> (<>...</>) – React
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 import Fragment 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 />
</>
);
}
https://react.dev/reference/react/Fragment 2/7
20/02/2025, 09:02 <Fragment> (<>...</>) – React
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:
App.js Download Reset
export default function Blog() {
return (
<>
<Post title="An update" body="It's been a while since I posted.
<Post title="My new blog" body="I am starting a new blog!" />
</>
)
}
function Post({ title, body }) {
return (
Show more
https://react.dev/reference/react/Fragment 3/7
20/02/2025, 09:02 <Fragment> (<>...</>) – React
DEEP DIVE
How to write a Fragment without the special syntax?
Show Details
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 (
https://react.dev/reference/react/Fragment 4/7
20/02/2025, 09:02 <Fragment> (<>...</>) – React
<>
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:
App.js Download Reset
import { Fragment } from 'react';
const posts = [
{ id: 1, title: 'An update', body: "It's been a while since I poste
{ id: 2, title: 'My new blog', body: 'I am starting a new blog!' }
];
https://react.dev/reference/react/Fragment 5/7
20/02/2025, 09:02 <Fragment> (<>...</>) – React
export default function Blog() {
return posts.map(post =>
<Fragment key={post.id}>
<PostTitle title={post.title} />
Show more
PREVIOUS
Components
NEXT
<Profiler>
Copyright © Meta Platforms, Inc
https://react.dev/reference/react/Fragment 6/7
20/02/2025, 09:02 <Fragment> (<>...</>) – React
uwu?
Learn React API Reference
Quick Start React APIs
Installation React DOM APIs
Describing the UI
Adding Interactivity
Managing State
Escape Hatches
Community More
Code of Conduct Blog
Meet the Team React Native
Docs Contributors Privacy
Acknowledgements Terms
https://react.dev/reference/react/Fragment 7/7