How to Use React Fragments to Return Multiple Elements in One Component

John Au-Yeung
Nov 3 · 12 min read

One common pattern in React apps is that you want to return multiple components in one element. Using fragments is the way to do this. When you wrap components inside a fragment, you do not add an extra DOM node outside the components that you want to render.

It is easy to use fragments, we just put:

return (
<React.Fragment>
<ComponentA />
<ComponentB />
<ComponentC />
</React.Fragment>
);

Keep the story going. Sign up for an extra free read.

You've completed your member preview for this month, but when you sign up for a free Medium account, you get one more story.
Already have an account?

John Au-Yeung

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/ . Follow me on Twitter at https://twitter.com/AuMayeung

DataSeries

Connecting data leaders and curating their thoughts 💡

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade