content: [API Reference](https://react.dev/reference/react)
  
  [Components](https://react.dev/reference/react/components)
  
  # &lt;Fragment&gt; (&lt;&gt;...&lt;/&gt;)[Link for this heading]()
  
  `<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[Link for Reference]()
  
  ### `<Fragment>`[Link for this heading]()
  
  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[Link for Props]()
  
  - **optional** `key`: Fragments declared with the explicit `<Fragment>` syntax may have [keys.](https://react.dev/learn/rendering-lists)
  
  #### Caveats[Link for 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](https://react.dev/learn/preserving-and-resetting-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.](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b)
  
  * * *
  
  ## Usage[Link for Usage]()
  
  ### Returning multiple elements[Link for 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:
  
  App.js
  
  App.js
  
  Reset[Fork](https://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-react-app "Open in CodeSandbox")
  
  ```
  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>
    );
  }
  
  ```
  
  Show more
  
  ##### Deep Dive
  
  #### How to write a Fragment without the special syntax?[Link for How to write a Fragment without the special syntax?]()
  
  Show Details
  
  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[Link for 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[Link for 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[Link for 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](https://react.dev/learn/rendering-lists), 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
  
  App.js
  
  Reset[Fork](https://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-react-app "Open in CodeSandbox")
  
  ```
  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>
    );
  }
  
  ```
  
  Show more
  
  [PreviousComponents](https://react.dev/reference/react/components)
  
  [Next&lt;Profiler&gt;](https://react.dev/reference/react/Profiler)