When rendering multiple Fragments in a list, you must use the explicit Fragment syntax with a key prop. The shorthand <></> syntax doesn't support keys or any props, causing errors during list rendering.
Fixes React.Fragment requires a key prop when in a list
import React from 'react';
const items = [{id: 1, name: 'Item 1'}, {id: 2, name: 'Item 2'}];
function List() {
return (
<ul>
{items.map((item) => (
<>
<li>{item.name}</li>
<li>{item.id}</li>
</>
))}
</ul>
);
}import React from 'react';const items = [{id: 1, name: 'Item 1'}, {id: 2, name: 'Item 2'}];function List() {return (<ul>{items.map((item) => (<><li>{item.name}</li><li>{item.id}</li></>))}</ul>);}React.Fragment requires a key prop when in a list
React requires each list item to have a unique 'key' prop to efficiently track which elements have changed, been added, or been removed. When grouping elements inside a Fragment in a list, you cannot use the shorthand `<>...</>` syntax because it doesn't support any props. Instead, you must explicitly import and use `<Fragment key={uniqueId}>` to assign a key to the fragment wrapper.
The shorthand syntax <> and </> cannot accept props. You must explicitly import Fragment from React and use the full syntax when you need to add a key prop.
Before (incorrect):
import React from 'react';
const items = [{id: 1, name: 'Item 1'}, {id: 2, name: 'Item 2'}];
function List() {
return (
<ul>
{items.map((item) => (
<>
<li>{item.name}</li>
<li>{item.id}</li>
</>
))}
</ul>
);
}After (correct):
import { Fragment } from 'react';
const items = [{id: 1, name: 'Item 1'}, {id: 2, name: 'Item 2'}];
function List() {
return (
<ul>
{items.map((item) => (
<Fragment key={item.id}>
<li>{item.name}</li>
<li>{item.id}</li>
</Fragment>
))}
</ul>
);
}The key should be a unique value that remains stable across re-renders. Do not use the array index as a key, as this will cause problems if the list is reordered or items are added/removed.
Good:
{items.map((item) => (
<Fragment key={item.id}>
{/* content */}
</Fragment>
))}Bad (using index):
{items.map((item, index) => (
<Fragment key={index}>
{/* content */}
</Fragment>
))}Make sure you have imported Fragment from the 'react' package at the top of your file:
import { Fragment } from 'react';Alternatively, you can import React and use React.Fragment:
import React from 'react';
{items.map((item) => (
<React.Fragment key={item.id}>
{/* content */}
</React.Fragment>
))}If you have multiple places in your component that render lists of fragments, update each one to use the explicit Fragment syntax with appropriate key props. Check that:
- Every Fragment in a loop has a unique, stable key
- The key is derived from the data (not the array index)
- The Fragment import is present in your file
- No other props (like id, className, etc.) are being passed to the Fragment
Fragments are meant to be transparent wrappers that don't appear in the DOM. The shorthand <> syntax was introduced for convenience in simple cases where no props are needed. However, when you need to assign a key (which is required for list rendering), you must use the full explicit syntax. This is a deliberate design choice by React to keep the shorthand syntax lightweight.
Common misconception: Some developers try to pass other props to fragments like className or id, expecting them to apply to the wrapper. This won't work—React.Fragment only accepts the 'key' prop (and 'children', implicitly). If you need to add attributes like className, use a div or other semantic HTML element instead of a Fragment.