How to fix Warning: React does not recognize the `%s` prop on a DOM element in React

ReactBEGINNERLOWUpdated Dec 10, 2025· 122 views

React prints this warning when a standard DOM element receives a prop that the renderer does not recognize. The prop originated from a component props object or a prop spread, but React removes the attribute from the final HTML and logs the warning so you can keep DOM output clean.

Quick fix

Fixes Warning: React does not recognize the `%s` prop on a DOM element

const Card = ({ isActive, children, ...domProps }) => (
  <div {...domProps}>{children}</div>
);
  1. Find the offending DOM element
  2. Stop passing custom props straight to DOM nodes
  3. Prefix custom attribute data correctly
  4. Use a custom component wrapper for custom props
react — error
const Card = ({ isActive, children, ...domProps }) => (
  <div {...domProps}>{children}</div>
);
Warning: React does not recognize the `%s` prop on a DOM element

What this error means

React keeps a whitelist of attributes that are valid for HTML elements and drops anything unknown to DOM spec, so if you pass a custom prop (like `foo` or `isActive`) to a native element it will never reach the DOM. React warns instead of silently failing so you can decide whether to rename the prop, prefix it with `data-`/`aria-`, or stop passing it to the DOM node. Usually the warning appears after spreading props onto a DOM element or forwarding component-only data without destructuring it first.

Typical symptoms

  • Console shows: 'Warning: React does not recognize the `foo` prop on a DOM element.'
  • The warning names the offending prop and DOM element (e.g., `<div>` or `<button>`).
  • Custom data intended for a component does not appear on the rendered DOM element.
  • Rendering still works, but React adds noise to the console each render.

Common causes

  1. Spreading component props onto a DOM node without filtering out custom props.
  2. Passing a component-only prop (for styling, state, or logic) directly to a DOM element.
  3. Using a nonstandard attribute name instead of a valid HTML attribute or `data-`/`aria-` prefix.
  4. Forwarding props from a parent component down through an intermediary component without removing them before they hit a native element.
  5. Misspelling a standard DOM attribute so React treats it as unknown.

How to fix "Warning: React does not recognize the `%s` prop on a DOM element"

1Find the offending DOM element

Review the warning message—the prop name and the DOM element are included in the log. Search the component tree for where you spread props or pass the named prop to that element. If the warning only happens with specific props, add console.log temporarily to inspect props before they reach the DOM.

2Stop passing custom props straight to DOM nodes

Destructure or omit non-DOM props before spreading onto an element:

jsx
const Card = ({ isActive, children, ...domProps }) => (
  <div {...domProps}>{children}</div>
);

If the custom prop is only used by the component itself, take it out of the spread and apply it only to logic, not DOM attributes.

3Prefix custom attribute data correctly

If you want to keep extra metadata on a DOM node, use the data- or aria- prefix so the attribute is allowed: data-active={isActive} or aria-live="polite". The warning will disappear because these prefixes are permitted by HTML and React passes them through.

4Use a custom component wrapper for custom props

When implementing reusable components, accept custom props but render only valid DOM attributes. Handle the prop internally or pass it to another child component instead of the DOM element itself. Higher-order components or helper utilities can help separate DOM props from component props.

Advanced notes

React 17 and later only log this warning because unknown attributes are now ignored; React 16 and earlier also removed the attributes from the DOM but were stricter. When interoperating with Web Components, you can pass any attribute, but standard DOM elements still require valid names. If you need to forward props to a custom element, render it as <my-element> rather than a built-in tag, or use refs to set properties after mount.

Frequently asked questions

What does "Warning: React does not recognize the `%s` prop on a DOM element" mean?
React keeps a whitelist of attributes that are valid for HTML elements and drops anything unknown to DOM spec, so if you pass a custom prop (like foo or isActive) to a native element it will never reach the DOM. React warns instead of silently failing so you can decide whether to rename the prop, prefix it with data-/aria-, or stop passing it to the DOM node. Usually the warning appears after spreading props onto a DOM element or forwarding component-only data without destructuring it first.
How do I fix "Warning: React does not recognize the `%s` prop on a DOM element"?
React prints this warning when a standard DOM element receives a prop that the renderer does not recognize. The prop originated from a component props object or a prop spread, but React removes the attribute from the final HTML and logs the warning so you can keep DOM output clean.
What causes "Warning: React does not recognize the `%s` prop on a DOM element"?
Spreading component props onto a DOM node without filtering out custom props. Passing a component-only prop (for styling, state, or logic) directly to a DOM element. Using a nonstandard attribute name instead of a valid HTML attribute or data-/aria- prefix.
Is the "Warning: React does not recognize the `%s` prop on a DOM element" error serious?
It is a low-severity error — more of a blocker than a risk. The steps above resolve it.

Official resources & further reading