This error occurs when trying to pass a key prop to React's shorthand Fragment syntax (<>...</>). Only the explicit <Fragment> syntax supports the key attribute, which is needed when rendering lists of fragments.
This error message indicates you're attempting to use a key prop with React's shorthand Fragment syntax (`<>...</>`), which doesn't support any props. In React, Fragments let you group multiple elements without adding extra nodes to the DOM. While the shorthand syntax is convenient for simple grouping, it has a limitation: it cannot accept any props, including the key prop. The key prop becomes essential when rendering lists of elements in React, as it helps React identify which items have changed, been added, or removed. When you need to render an array of Fragments (for example, mapping over data where each item returns multiple elements), React requires unique keys for efficient reconciliation. This is where the explicit `<Fragment>` syntax becomes necessary. React.Fragment only accepts two props: `key` and `children`. Attempting to pass any other props to Fragment (like className, id, or data attributes) will also trigger similar warnings, as Fragment is designed purely as a logical grouping mechanism without rendering to the DOM.
First, ensure you have Fragment imported at the top of your file:
import { Fragment } from 'react';
// or
import React from 'react';If you're using the React namespace import, you'll reference it as React.Fragment.
Change from shorthand to explicit Fragment syntax where you need keys:
// ❌ Wrong - shorthand doesn't support keys
items.map(item => (
<> key={item.id}
<dt>{item.term}</dt>
<dd>{item.definition}</dd>
</>
));
// ✅ Correct - explicit Fragment with key
items.map(item => (
<Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.definition}</dd>
</Fragment>
));Ensure your keys are unique and stable:
// ✅ Good - using stable unique IDs
users.map(user => (
<Fragment key={user.id}>
<h3>{user.name}</h3>
<p>{user.bio}</p>
</Fragment>
));
// ⚠️ Avoid - array index as key (only if items never reorder)
users.map((user, index) => (
<Fragment key={index}>
<h3>{user.name}</h3>
<p>{user.bio}</p>
</Fragment>
));
// ❌ Wrong - non-unique keys
users.map(user => (
<Fragment key="user"> {/* Same key for all items! */}
<h3>{user.name}</h3>
<p>{user.bio}</p>
</Fragment>
));You can still use the shorthand <>...</> syntax when you don't need a key:
// ✅ Shorthand is fine here - not in a list
function UserProfile({ user }) {
return (
<>
<h1>{user.name}</h1>
<p>{user.email}</p>
<button>Edit</button>
</>
);
}
// ✅ Explicit Fragment needed here - in a map
function UserList({ users }) {
return users.map(user => (
<Fragment key={user.id}>
<h2>{user.name}</h2>
<p>{user.email}</p>
</Fragment>
));
}If you're using eslint-plugin-react, ensure it's configured to catch missing keys:
// .eslintrc.json
{
"rules": {
"react/jsx-key": ["error", {
"checkFragmentShorthand": true
}]
}
}This will warn you when using shorthand Fragment syntax in arrays where keys are required.
Verify that your list renders without warnings:
import { Fragment } from 'react';
function DefinitionList({ terms }) {
return (
<dl>
{terms.map(term => (
<Fragment key={term.id}>
<dt>{term.word}</dt>
<dd>{term.meaning}</dd>
</Fragment>
))}
</dl>
);
}Check the browser console to confirm no key-related warnings appear.
Why Fragment Only Accepts Key and Children
Fragments don't render to the DOM—they're purely a syntactical construct for grouping. Since they produce no DOM node, props like className, style, or event handlers have nowhere to attach. Only key is supported because React's reconciliation algorithm needs it internally for list rendering.
Performance Considerations
Using Fragments (either syntax) has no performance penalty—they don't create extra DOM nodes. The explicit <Fragment> syntax has identical runtime performance to <>...</>; the only difference is compile-time prop support.
TypeScript Considerations
In TypeScript, the shorthand syntax may require additional JSX configuration:
// tsconfig.json
{
"compilerOptions": {
"jsx": "react-jsx" // or "react-jsxdev" for development
}
}Older React versions or TypeScript configs using "jsx": "react" may have different Fragment handling.
Alternative: Single Wrapper Element
If you find yourself needing other props besides key, Fragment isn't the right choice—use a real DOM element:
// If you need className, use div instead of Fragment
items.map(item => (
<div key={item.id} className="item-group">
<h3>{item.title}</h3>
<p>{item.description}</p>
</div>
));Nested Fragments
You can nest Fragments, but only the outermost one (if in a list) needs a key:
items.map(item => (
<Fragment key={item.id}>
<h2>{item.category}</h2>
<>
<p>{item.description}</p>
<span>{item.date}</span>
</>
</Fragment>
));React.FC expects children prop to be defined
React.FC no longer includes implicit children prop
Warning: You provided a `selected` prop to a form field without an `onChange` handler
You provided a 'selected' prop without an onChange handler
Failed to load source map from suspense chunk
How to fix "Failed to load source map from suspense chunk" in React
Prop spreading could cause security issues
Prop spreading could cause security issues
React Hook useCallback has a missing dependency: 'variable'. Either include it or remove the dependency array react-hooks/exhaustive-deps
React Hook useCallback has a missing dependency