<Fragment> (<>...</>) – React
Description: The library for web and native user interfaces

Is this page useful?

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.

#### 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 />
        </>
      );
    }

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:

Fork

    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 (
        <>
          <PostTitle title={title} />
          <PostBody body={body} />
        </>
      );
    }

    function PostTitle({ title }) {
      return <h1>{title}</h1>
    }

    function PostBody({ body }) {
      return (
        <article>
          <p>{body}</p>
        </article>
      );
    }

#####
Deep Dive

#### How to write a Fragment without the special syntax?

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:

Fork

    import { Fragment } from 'react';

    const posts = [
      { id: 1, title: 'An update', body: "It's been a while since I posted..." },
      { id: 2, title: 'My new blog', body: 'I am starting a new blog!' }
    ];

    export default function Blog() {
      return posts.map(post =>
        <Fragment key={post.id}>
          <PostTitle title={post.title} />
          <PostBody body={post.body} />
        </Fragment>
      );
    }

    function PostTitle({ title }) {
      return <h1>{title}</h1>
    }

    function PostBody({ body }) {
      return (
        <article>
          <p>{body}</p>
        </article>
      );
    }

PreviousComponents
Next<Profiler>