React Unknown DOM Attribute from Props Spread — What It Means & How to Fix It

What Does This Error Mean?

This React warning appears when a custom or non-standard prop is spread onto a native HTML element like <div> or <input>. React passes all spread props to the DOM, and the browser does not know what to do with custom props like isActive, primaryColor, or fetchData. The warning reads: 'Warning: Unknown prop `propName` on <div> tag. Remove this prop from the element.' The fix is to destructure and remove custom props before spreading the rest onto the DOM element.

Affected Models

React 17
React 18
React 19
Create React App
Next.js

Common Causes

All props are spread with {...props} onto a native HTML element without filtering out custom/non-HTML props first
A higher-order component or styled component passes custom boolean or string props down to a DOM element
A component forwards all its props to a child HTML element without removing component-specific props
Styled-components or CSS-in-JS library props (isActive, variant, size) are forwarded to the DOM
A third-party component passes custom props through to its underlying HTML element without filtering

How to Fix It

Find the component generating the warning. The browser console shows the component name and which prop is unknown. Open that component file.

The warning message format is: 'Warning: Unknown prop `isActive` on <div> tag. Remove this prop from the element. If intentional, cast the value to a string.'
Destructure the custom prop out of the props object before spreading the rest. Example: const { isActive, onClick, ...rest } = props; — then use {...rest} on the DOM element, and use isActive in your component logic only.

The ...rest pattern collects all remaining props after you have extracted the ones you handle yourself, and only those safe HTML-compatible props get spread to the DOM.
If using styled-components, prefix custom props with a dollar sign ($). Styled-components v5.1+ treats $-prefixed props (like $isActive) as transient props that are used for styling but are never forwarded to the DOM.

Example: <StyledButton $isActive={true}> — the $isActive prop is used in the CSS template literal but not passed to the underlying <button> element.
If the component should forward unknown props to the DOM (like a wrapper component), filter out your custom props explicitly. Use a known list of custom prop names and filter them from the spread.

This is a useful pattern for reusable UI library components that need to forward ARIA attributes and data attributes while blocking custom props.
If using TypeScript, define prop types that separate component-specific props from HTML element props. Extend React.HTMLAttributes<HTMLDivElement> for props that should be forwarded and keep custom props as a separate interface.

TypeScript can catch unknown DOM attribute issues at compile time, before they appear as runtime console warnings.

When to Call a Professional

This is a React code quality warning about incorrect prop forwarding. No external help is needed — the fix is in your component code. This warning does not break functionality but causes console noise and can trigger HTML validation errors in strict environments.

Frequently Asked Questions

Does this warning affect how my app works?

The warning does not break functionality — the app renders correctly. However, the unknown attribute may still be written to the DOM as an attribute on the HTML element, which is invalid HTML. Screen readers and accessibility tools may behave unexpectedly with non-standard attributes. Fixing the warning also makes your developer console cleaner and easier to spot real issues.

What HTML attributes can I safely spread onto DOM elements?

You can spread standard HTML attributes: data-* attributes, aria-* attributes, event handlers (onClick, onChange), style, className, id, and all valid HTML element attributes. Custom prop names that you invented (isActive, primaryColor, onFetchComplete) are not valid HTML attributes and should be filtered out before spreading. React's documentation at react.dev lists all valid DOM attributes it recognizes.

How do I pass data to styled-components without this warning?

Use the transient props feature introduced in styled-components v5.1. Prefix your custom props with a dollar sign: $variant, $isActive, $size. Styled-components uses these for CSS interpolation but does not forward them to the underlying DOM element. This eliminates the unknown DOM attribute warning without needing to manually destructure props before the styled component.