# The React Fragment

> Learn how to use React.Fragment, and its empty-tag shorthand, to return multiple elements from a component without adding an extra wrapper div to the output.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2018-10-31 | Topics: [React](https://flaviocopes.com/tags/react/) | Canonical: https://flaviocopes.com/react-fragment/

Notice how I wrap return values in a `div`. This is because a component can only return one single element, and if you want more than one, you need to wrap it with another container tag.

This however causes an unnecessary `div` in the output. You can avoid this by using `React.Fragment`:

```js
import React, { Component, Fragment } from 'react'

class BlogPostExcerpt extends Component {
  render() {
    return (
      <React.Fragment>
        <h1>{this.props.title}</h1>
        <p>{this.props.description}</p>
      </React.Fragment>
    )
  }
}
```

which also has a very nice shorthand syntax `<></>` that is supported only in recent releases (and Babel 7+):

```js
import React, { Component, Fragment } from 'react'

class BlogPostExcerpt extends Component {
  render() {
    return (
      <>
        <h1>{this.props.title}</h1>
        <p>{this.props.description}</p>
      </>
    )
  }
}
```