Fragments
📚 What are React Fragments? React requires every component to return a SINGLE top-level element. But sometimes you want to return two sibling elements without wrapping them in an extra <div> that messes up your layout or CSS. React Fragments solve this: they group multiple elements together withou…
Appy Says…
React components must return a single root element. But wrapping everything in a div just to satisfy this rule creates 'div soup' — unnecessary DOM elements that break CSS layouts. React Fragments solve this cleanly.
What are React Fragments?
A Fragment lets you return multiple elements from a component without adding an extra DOM node. It's an invisible wrapper that exists in JSX but renders nothing in the HTML.
- •Long form:
<React.Fragment>...</React.Fragment> - •Short form (preferred):
<>...</> - •No extra DOM element in the output — completely invisible
- •Fragments support key prop:
<Fragment key={item.id}>(short form doesn't) - •Use when: returning multiple table rows, multiple list items, multiple elements from a map
- •Avoids invalid HTML like a div inside a <table> or <ul>
Think of it like a Roblox model with no visible part
In Roblox Studio you can have a Model folder that groups parts logically — it shows in the Explorer tree but creates nothing visible in the world. A Fragment is React's invisible grouping container: organises JSX, renders nothing in the DOM.
How It Works
- •1. Without Fragment:
return <div><td>...</td><td>...</td></div>— invalid (div inside tr) - •2. With Fragment:
return <><td>...</td><td>...</td></>— valid HTML output - •3. Fragment compiles to
React.createElement(React.Fragment, null, ...) - •4. React renders children directly without wrapping DOM element
- •5. Short form
<>is the most common — use it by default - •6. Named Fragment needed when you need a key:
<Fragment key={id}>
Real-World Examples
- •Table rows: return two <td> cells without a wrapper <div>
- •Returning multiple <dt>/<dd> pairs from a map
- •Layout: sibling heading + paragraph without a wrapping div
- •Applaa lesson cards returned in a flat list without extra container divs
Key Facts
- •The <></> short syntax was introduced in React 16.2
- •Fragments never appear in the HTML — confirmed by inspecting the DOM in DevTools
- •Fragments fix common CSS Grid/Flexbox bugs caused by unexpected wrapper divs
- •React 16+ supports returning arrays and null from components too, but Fragments are cleaner
Watch Out!
The short form <></> cannot accept a key prop. If you're mapping a list and each group needs a key, use <React.Fragment key={item.id}> — you can't add a key to <>.
Remember
<>...</> wraps multiple elements without adding a DOM node. Use whenever you need to return 2+ sibling elements. Use <Fragment key=> when mapping with keys.
What You Learned
- •Fragments let you return multiple JSX elements without a wrapper DOM element
- •Short form:
<></>; keyed form:<Fragment key={id}> - •Unlocks: clean HTML output, valid table/list markup, no spurious div wrappers
Key Facts
- →The <></> short syntax was introduced in React 16.2
- →Fragments never appear in the HTML — confirmed by inspecting the DOM in DevTools
- →Fragments fix common CSS Grid/Flexbox bugs caused by unexpected wrapper divs
- →React 16+ supports returning arrays and null from components too, but Fragments are cleaner
Real-World Examples
Remember
<>...</> wraps multiple elements without adding a DOM node. Use whenever you need to return 2+ sibling elements. Use <Fragment key=> when mapping with keys.
Quick Quiz
Fragment is used to?