How to fix Only React.Children can be passed to Fragment children in React
React.Fragment is a special component that can only receive key and children as props. Passing any other props like className, style, or custom attributes will trigger this validation warning.
Quick fix
Fixes Only React.Children can be passed to Fragment children
// ❌ This will cause the warning
function BadExample(props: any) {
return (
<React.Fragment {...props}>
<h1>Title</h1>
<p>Content</p>
</React.Fragment>
);
}
// ✅ Use a div to accept props
function GoodExample(props: any) {
return (
<div {...props}>
<h1>Title</h1>
<p>Content</p>
</div>
);
}- Wrap content in a real DOM element instead of Fragment
- Filter props before spreading to Fragment
- Use Fragment only for grouping without props
- Update library components causing the warning
// ❌ This will cause the warningfunction BadExample(props: any) {return (<React.Fragment {...props}><h1>Title</h1><p>Content</p></React.Fragment>);}// ✅ Use a div to accept propsfunction GoodExample(props: any) {return (<div {...props}><h1>Title</h1><p>Content</p></div>);}Only React.Children can be passed to Fragment children
What this error means
React.Fragment is a lightweight wrapper that allows you to group multiple elements without adding extra nodes to the DOM. However, Fragment is not a regular React component—it's a special construct with strict limitations on what props it can receive. Unlike normal React components that can accept any props, Fragment can only accept two specific props: `key` (used when rendering lists) and `children` (the elements to group). This restriction exists because Fragment doesn't render an actual DOM element, so props like className, style, id, or event handlers have nowhere to apply. When you try to spread props onto a Fragment or explicitly pass invalid props, React will issue a warning: "Invalid prop [propName] supplied to React.Fragment. React.Fragment can only have key and children props." This validation helps prevent mistakes where you might accidentally try to style or attach behavior to something that doesn't exist in the DOM.
Typical symptoms
- Console warning: "Invalid prop supplied to React.Fragment"
- Warning mentions that React.Fragment can only have key and children props
- Application still renders but shows validation errors in development
- May occur after upgrading React versions (especially React 18/19)
- Warning appears when using third-party libraries with Fragment wrappers
Common causes
- Spreading props ({...props}) onto a React.Fragment component
- Passing className, style, id, or other HTML attributes to Fragment
- Using event handlers (onClick, onMouseOver, etc.) on Fragment
- Passing ref prop to Fragment (use forwardRef on parent instead)
- Library components spreading all props to Fragment without filtering
- Upgrading React versions with stricter Fragment validation
- Using data-* attributes or aria-* attributes on Fragment
How to fix "Only React.Children can be passed to Fragment children"
If you need to apply props like className or event handlers, use an actual DOM element (div, span, section) instead of Fragment:
// ❌ This will cause the warning
function BadExample(props: any) {
return (
<React.Fragment {...props}>
<h1>Title</h1>
<p>Content</p>
</React.Fragment>
);
}
// ✅ Use a div to accept props
function GoodExample(props: any) {
return (
<div {...props}>
<h1>Title</h1>
<p>Content</p>
</div>
);
}If the extra wrapper is a concern for styling, you can use a semantic element like <section> or a <div> with minimal styling impact.
If you must use Fragment but receive props from parent components, explicitly filter out invalid props:
// ✅ Only pass key prop to Fragment
function FilteredFragment({ children, key, ...otherProps }: any) {
// otherProps are intentionally not spread to Fragment
return <React.Fragment key={key}>{children}</React.Fragment>;
}
// Or destructure and discard invalid props
function SafeComponent({ className, style, ...validProps }: any) {
return (
<>
{validProps.children}
</>
);
}This approach is useful when wrapping third-party components that pass extra props.
Fragment is designed for simple grouping. If you don't need to pass any props, use the shorthand syntax:
// ✅ Fragment with no props (shorthand)
function SimpleComponent() {
return (
<>
<Header />
<Main />
<Footer />
</>
);
}
// ✅ Fragment with only key prop (full syntax required)
function ListComponent({ items }: { items: any[] }) {
return (
<>
{items.map((item) => (
<React.Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.definition}</dd>
</React.Fragment>
))}
</>
);
}Remember: only use React.Fragment when you explicitly need the key prop. Otherwise, use <></>.
If the warning comes from a third-party library, check for updates:
# Update to latest version
npm update library-name
# Or check for React 19 compatibility
npm outdatedCommon libraries that had this issue:
- TanStack Table (fixed in v8.11+)
- Headless UI (fixed in recent versions)
- Tiptap (check latest releases)
- React Native Reanimated (ensure Babel plugin matches version)
If no update is available, file an issue with the library maintainers or apply a local patch using patch-package.
Advanced notes
Why Fragment has these restrictions:
Fragment doesn't create a real DOM node—it's purely a React construct for grouping. When React compiles your code, Fragments are essentially removed from the final output, leaving only their children. This is why props like className or onClick have nowhere to go.
Key prop is special:
The key prop is the only exception to Fragment's prop restrictions because it's not a DOM attribute—it's a React-specific prop used for reconciliation during list rendering. React needs keys to track which items changed, so Fragment supports it even though it doesn't render to the DOM.
React 18/19 stricter validation:
React 18 and 19 introduced stricter validation for Fragment props in development mode. Code that worked silently in React 17 may now show warnings, especially if you're using libraries that haven't updated their Fragment usage.
Performance considerations:
Using Fragment instead of unnecessary wrapper divs improves performance by reducing DOM node count. However, if you need styling or behavior, don't fight Fragment's limitations—just use a real element. The performance difference is negligible for most applications.
TypeScript strict typing:
If using TypeScript, Fragment's type signature only allows key and children:
type FragmentProps = {
key?: React.Key;
children?: React.ReactNode;
};Attempting to pass other props will cause TypeScript errors before runtime warnings appear.
Frequently asked questions
- What does "Only React.Children can be passed to Fragment children" mean?
- Fragment is a lightweight wrapper that allows you to group multiple elements without adding extra nodes to the DOM. However, Fragment is not a regular React component—it's a special construct with strict limitations on what props it can receive. Unlike normal React components that can accept any props, Fragment can only accept two specific props: key (used when rendering lists) and children (the elements to group).
- How do I fix "Only React.Children can be passed to Fragment children"?
- React.Fragment is a special component that can only receive key and children as props. Passing any other props like className, style, or custom attributes will trigger this validation warning.
- What causes "Only React.Children can be passed to Fragment children"?
- Spreading props ({...props}) onto a React.Fragment component Passing className, style, id, or other HTML attributes to Fragment Using event handlers (onClick, onMouseOver, etc.) on Fragment
- Is the "Only React.Children can be passed to Fragment children" error serious?
- It is a low-severity error — more of a blocker than a risk. The steps above resolve it.