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. ](/learn/rendering-lists#keeping-list-items-in-order-with-key)

####  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 ](/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

###  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?

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

Like any other element, you can assign Fragment elements to varia