The React Fragment
How to use React.Fragment to create invisible HTML tags
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
:
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+):
import React, { Component, Fragment } from 'react'
class BlogPostExcerpt extends Component {
render() {
return (
<>
<h1>{this.props.title}</h1>
<p>{this.props.description}</p>
</>
)
}
}
→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter
→ JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025