How to fix Keys should not be passed as JSX attributes in React

ReactINTERMEDIATEMEDIUMUpdated Dec 8, 2025· 150 views

This warning occurs when a props object containing a "key" property is spread into JSX. React requires keys to be passed directly to JSX elements, not through spread operators, to properly track components during rendering.

Quick fix

Fixes Keys should not be passed as JSX attributes

// ❌ Wrong - spreading object with key
const props = { key: item.id, name: item.name, value: item.value };
<Component {...props} />

// ✅ Correct - extract key before spreading
const props = { key: item.id, name: item.name, value: item.value };
const { key, ...restProps } = props;
<Component key={key} {...restProps} />
  1. Extract the key prop before spreading
  2. Pass key directly to JSX elements in list rendering
  3. Update component wrappers to handle key separately
  4. Refactor utility functions that merge props
react — error
// ❌ Wrong - spreading object with key
const props = { key: item.id, name: item.name, value: item.value };
<Component {...props} />
// ✅ Correct - extract key before spreading
const props = { key: item.id, name: item.name, value: item.value };
const { key, ...restProps } = props;
<Component key={key} {...restProps} />
Keys should not be passed as JSX attributes

What this error means

This warning appears when you attempt to spread a props object that includes a "key" property into a JSX element. React treats "key" and "ref" as special props that are reserved for React's internal reconciliation algorithm. These props are not forwarded to components like regular props. When you use the spread operator (...props) with an object containing a key property, React cannot properly extract and use the key for its reconciliation process. The key prop must be explicitly declared on the JSX element itself, separate from any spread operations. This warning became more prominent and strictly enforced in React 18.3.0 and later versions. While the code may still function, ignoring this warning can lead to unpredictable behavior in list rendering and component updates, as React relies on keys to efficiently identify which items have changed, been added, or removed.

Typical symptoms

  • Warning message "A props object containing a 'key' prop is being spread into JSX" appears in console
  • Warning appears when rendering lists of components using spread operators
  • Components in lists may not update correctly when reordered or filtered
  • React DevTools shows warnings about key prop handling
  • Warning typically appears after upgrading to React 18.3.0 or later
  • ESLint may flag code with react/jsx-key rule violations
  • Component behavior appears normal despite console warnings

Common causes

  1. Spreading a props object that includes a "key" property directly into JSX: {...props} where props contains key
  2. Passing all properties including key through component wrappers without extracting key first
  3. Using utility functions that merge or spread props objects containing the reserved key property
  4. Copying patterns from older React code that predates stricter key prop enforcement
  5. Component libraries or HOCs that incorrectly forward key props through spread operators
  6. Migrating from React versions prior to 18.3.0 where this warning was less strict
  7. Destructuring props in a way that includes key in the spread: const {...allProps} = props
  8. Using Object.assign() or similar methods to merge objects containing key properties before spreading

How to fix "Keys should not be passed as JSX attributes"

1Extract the key prop before spreading

Destructure your props object to separate the key from other properties:

javascript
// ❌ Wrong - spreading object with key
const props = { key: item.id, name: item.name, value: item.value };
<Component {...props} />

// ✅ Correct - extract key before spreading
const props = { key: item.id, name: item.name, value: item.value };
const { key, ...restProps } = props;
<Component key={key} {...restProps} />

This ensures React receives the key as a direct JSX attribute while other props are spread normally.

2Pass key directly to JSX elements in list rendering

When mapping over arrays, always pass the key directly to the JSX element, not through spread:

javascript
// ❌ Wrong
const items = data.map(item => {
  const props = { key: item.id, ...item };
  return <ListItem {...props} />;
});

// ✅ Correct
const items = data.map(item => (
  <ListItem key={item.id} name={item.name} value={item.value} />
));

If you need the key value as a prop, pass it with a different name like id or itemKey.

3Update component wrappers to handle key separately

If you have wrapper components that forward props, modify them to extract and handle key explicitly:

javascript
// ❌ Wrong wrapper
function Wrapper(props) {
  return <div><Component {...props} /></div>;
}

// ✅ Correct wrapper
function Wrapper({ key, ...restProps }) {
  return <div><Component key={key} {...restProps} /></div>;
}

// Or if the wrapper itself needs the key:
function Wrapper(props) {
  const { key: itemKey, ...restProps } = props;
  return <div key={itemKey}><Component {...restProps} /></div>;
}
4Refactor utility functions that merge props

If you use helper functions to merge or construct props objects, ensure they don't include key in the merged result:

javascript
// ❌ Wrong - includes key in merged props
const mergeProps = (defaults, overrides) => ({ ...defaults, ...overrides });
const props = mergeProps({ color: "blue" }, { key: id, color: "red" });
<Component {...props} />

// ✅ Correct - extract key after merging
const mergeProps = (defaults, overrides) => {
  const merged = { ...defaults, ...overrides };
  const { key, ...rest } = merged;
  return { key, props: rest };
};
const { key, props } = mergeProps({ color: "blue" }, { key: id, color: "red" });
<Component key={key} {...props} />
5Check third-party component library usage

If using UI libraries like Material-UI, React Native Paper, or PrimeReact, ensure you're using the latest version that addresses this warning:

bash
npm update @mui/material
# or
npm update react-native-paper
# or
npm update primereact

Many libraries released patches in response to React 18.3.0's stricter enforcement. Check the library's GitHub issues for specific guidance on handling this warning with their components.

6Enable ESLint rule to catch future violations

Add or ensure the react/jsx-key ESLint rule is enabled in your .eslintrc configuration:

json
{
  "rules": {
    "react/jsx-key": ["error", {
      "checkFragmentShorthand": true,
      "checkKeyMustBeforeSpread": true,
      "warnOnDuplicates": true
    }]
  }
}

The checkKeyMustBeforeSpread option specifically catches cases where key is included in spread props.

7Verify fixes by checking console warnings

After making changes, clear your console and reload your application:

bash
# Clear dev server cache if needed
rm -rf .next  # for Next.js
rm -rf node_modules/.cache  # for Create React App

npm run dev

Monitor the console to confirm the "A props object containing a 'key' prop is being spread into JSX" warning no longer appears during list rendering or component mounting.

Advanced notes

The key prop is one of two "special" props in React (along with ref) that are reserved for React's internal use and are never passed to components as props. This is by design: keys are used by React's reconciliation algorithm to identify which items in a list have changed, been added, or been removed, enabling efficient updates to the DOM.

If you genuinely need to access the key value inside your component, you must pass it as a separate prop with a different name (commonly "id", "itemKey", or "itemId"). For example: <Item key={item.id} id={item.id} /> where key is used by React internally and id is accessible within the Item component.

In TypeScript projects, you may encounter type errors when trying to destructure key from props. The React types intentionally exclude key from component prop types. Use type assertions carefully if you must work with objects containing keys before rendering.

Some component patterns like render props or HOCs may require special handling. If you're building a HOC that wraps components in lists, document clearly that consumers must pass key to the HOC instance, not to the wrapped component.

Performance note: While spreading props is convenient, it can lead to unnecessary re-renders if not used carefully. Consider using React.memo() or useMemo() for components that receive frequently-changing props through spread operators.

For React Native developers: This warning appears with the same frequency in React Native 0.74+ due to the shared React 18.3.0 core. The fixes are identical to web React applications.

Frequently asked questions

What does "Keys should not be passed as JSX attributes" mean?
This warning appears when you attempt to spread a props object that includes a "key" property into a JSX element. React treats "key" and "ref" as special props that are reserved for React's internal reconciliation algorithm. These props are not forwarded to components like regular props.
How do I fix "Keys should not be passed as JSX attributes"?
This warning occurs when a props object containing a "key" property is spread into JSX. React requires keys to be passed directly to JSX elements, not through spread operators, to properly track components during rendering.
What causes "Keys should not be passed as JSX attributes"?
Spreading a props object that includes a "key" property directly into JSX: {...props} where props contains key Passing all properties including key through component wrappers without extracting key first Using utility functions that merge or spread props objects containing the reserved key property
Is the "Keys should not be passed as JSX attributes" error serious?
It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Official resources & further reading