bles, 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
](/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

[ Previous  Components  ](/reference/react/components) [ Next  <Profiler>
](/reference/react/Profiler)

* * *

How do you like these docs?

[ Take our survey!  ](https://www.surveymonkey.co.uk/r/PYRPF3X)

* * *

[ ](https://opensource.fb.com/)

©  2024

[ Learn React ](/learn)

[ Quick Start ](/learn)

[ Installation ](/learn/installation)

[ Describing the UI ](/learn/describing-the-ui)

[ Adding Interactivity ](/learn/adding-interactivity)

[ Managing State ](/learn/managing-state)

[ Escape Hatches ](/learn/escape-hatches)

[ API Reference ](/reference/react)

[ React APIs ](/reference/react)

[ React DOM APIs ](/reference/react-dom)

[ Community ](/community)

[ Code of Conduct
](https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md)

[ Meet the Team ](/community/team)

[ Docs Contributors ](/community/docs-contributors)

[ Acknowledgements ](/community/acknowledgements)

More

[ Blog ](/blog)

[ React Native ](https://reactnative.dev/)

[ Privacy ](https://opensource.facebook.com/legal/privacy)

[ Terms ](https://opensource.fb.com/legal/terms/)

[ ](https://www.facebook.com/react) [ ](https://twitter.com/reactjs) [
](https://github.com/facebook/react)

##  On this page

  * Overview 
  * Reference 
  * ` <Fragment> `
  * Usage 
  * Returning multiple elements 
  * Assigning multiple elements to a variable 
  * Grouping elements with text 
  * Rendering a list of Fragments