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