React Fragment
React Fragment is a feature in React that allows us to group multiple JSX elements without adding an extra HTML element to the DOM.
In React, when a component returns multiple elements, they must be wrapped inside a single parent element. React Fragment solves this requirement without creating unnecessary HTML elements.
1. Why do we need React Fragment?
Consider the following React component:
function App() {
return (
<h1>Welcome to React</h1>
<p>Learning React Fragment</p>
);
}
export default App;This code produces an error because React expects a single parent element.
One solution is to wrap the elements inside a div.
function App() {
return (
<div>
<h1>Welcome to React</h1>
<p>Learning React Fragment</p>
</div>
);
}
export default App;This works, but it creates an additional div element in the HTML DOM.
Can we group these elements without creating an additional HTML element? Yes! This is where React Fragment comes in.
2. How to use React Fragment?
React provides two ways to use Fragment.
Method 1: Using React.Fragment
import React from 'react';
function App() {
return (
<React.Fragment>
<h1>Welcome to React</h1>
<p>Learning React Fragment</p>
</React.Fragment>
);
}
export default App;Method 2: Using shorthand syntax
Instead of writing React.Fragment, we can use empty opening and closing tags: <> and </>.
function App() {
return (
<>
<h1>Welcome to React</h1>
<p>Learning React Fragment</p>
</>
);
}
export default App;Both methods produce the same result.
3. Difference between div and Fragment
Consider the following comparison.
Using div:
function App() {
return (
<div>
<h1>Hello React</h1>
<p>Welcome!</p>
</div>
);
}HTML DOM output:
<div>
<h1>Hello React</h1>
<p>Welcome!</p>
</div>Using Fragment:
function App() {
return (
<>
<h1>Hello React</h1>
<p>Welcome!</p>
</>
);
}HTML DOM output:
<h1>Hello React</h1>
<p>Welcome!</p>Notice the difference: Fragment does not create an additional DOM element.
4. When should we use React Fragment?
Use React Fragment when:
-
You need to return multiple JSX elements from a component.
-
You want to avoid unnecessary
divelements. -
You want to maintain a clean HTML DOM structure.
-
You don't want additional elements affecting CSS layouts such as Flexbox and Grid.
5. Can we use key with React Fragment?
Yes. When rendering multiple elements inside a list, React sometimes needs a key to identify each group.
Example:
function App() {
const users = [
{ id: 1, name: 'Syed' },
{ id: 2, name: 'Benazir' }
];
return (
<>
{users.map(user => (
<React.Fragment key={user.id}>
<h2>{user.name}</h2>
<hr />
</React.Fragment>
))}
</>
);
}
export default App;Important: The shorthand syntax <>...</> does not support the key attribute. Use <React.Fragment key={...}> when a key is required.
6. Interview Answer
What is React Fragment?
React Fragment is used to group multiple JSX elements without creating an additional DOM node. Normally, React components must return a single parent element. Instead of using an unnecessary div, we can use React Fragment (<>...</>) to group multiple elements while keeping the DOM structure clean.
Apply CSS styles to React Fragment
You cannot directly apply CSS styles to React Fragment because Fragment does not create an HTML DOM element.
Therefore, it has no style, className, id, or other DOM attributes.
1. Incorrect approach
function App() {
return (
<React.Fragment style={{ backgroundColor: 'lightblue' }}>
<h1>Hello React</h1>
<p>Welcome to React</p>
</React.Fragment>
);
}This is not supported. React Fragment does not accept styling props.
2. Solution 1: Apply styles to individual elements
function App() {
return (
<>
<h1 style={{ color: 'blue' }}>Hello React</h1>
<p style={{ backgroundColor: 'lightblue' }}>
Welcome to React
</p>
</>
);
}3. Solution 2: Use a div instead of Fragment
When you want to apply styles to the entire group, use a div.
function App() {
return (
<div style={{
backgroundColor: 'lightblue',
padding: '20px',
textAlign: 'center'
}}>
<h1>Hello React</h1>
<p>Welcome to React</p>
</div>
);
}4. Solution 3: Use CSS class
App.jsx
function App() {
return (
<div className="container">
<h1>Hello React</h1>
<p>Welcome to React</p>
</div>
);
}
export default App;App.css
.container {
background-color: lightblue;
padding: 20px;
text-align: center;
}5. Comparison
|
Feature |
Fragment |
div |
|---|---|---|
|
Groups multiple elements |
Yes |
Yes |
|
Creates DOM element |
No |
Yes |
|
Supports style |
No |
Yes |
|
Supports className |
No |
Yes |
|
Supports id |
No |
Yes |
|
Supports key |
Yes (explicit Fragment) |
Yes |
Interview point: React Fragment is used only for grouping JSX elements. Since it does not create a DOM node, we cannot apply CSS styles directly to it. When styling or layout is required for the entire group, use an appropriate HTML element such as div or section.
Even when you pass style as a JavaScript object, React Fragment does not support it.
The limitation is not the CSS syntax. The limitation is that Fragment does not render an actual DOM element.
1. Passing a style object directly to Fragment
function App() {
const styles = {
backgroundColor: 'lightblue',
padding: '20px'
};
return (
<React.Fragment style={styles}>
<h1>Hello React</h1>
<p>Welcome to React</p>
</React.Fragment>
);
}This is not supported. Fragment cannot receive a style prop.
2. Passing a style object to individual elements
This works perfectly:
function App() {
const styles = {
color: 'blue',
fontSize: '24px'
};
return (
<>
<h1 style={styles}>Hello React</h1>
<p style={styles}>Welcome to React</p>
</>
);
}Here, both elements receive the styles independently.
3. What if I want to apply the same style to the entire group?
Use a div:
function App() {
const styles = {
backgroundColor: 'lightblue',
padding: '20px',
textAlign: 'center'
};
return (
<div style={styles}>
<h1>Hello React</h1>
<p>Welcome to React</p>
</div>
);
}Key takeaway:
The style prop accepts a JavaScript object in JSX, but it must be attached to an actual DOM element. React Fragment is only a grouping mechanism, not a DOM element.