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.
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.
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
Cannot use private fields in class components without TS support
Cannot use private fields in class components without TS support
Cannot destructure property 'xxx' of 'undefined'
Cannot destructure property of undefined when accessing props
useNavigate() may be used only in the context of a <Router> component.
useNavigate() may be used only in the context of a Router component
Cannot find module or its corresponding type declarations
How to fix "Cannot find module or type declarations" in Vite