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.
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.
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.
Destructure or omit non-DOM props before spreading onto an element:
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.
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.
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.
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.
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