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

ReactINTERMEDIATELOWUpdated Dec 10, 2025· 127 views

The "React does not recognize the prop" warning occurs when you pass custom props to DOM elements that React doesn't recognize as valid HTML attributes. This happens because React filters out non-standard props before rendering to prevent invalid HTML attributes from appearing in the DOM.

Quick fix

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

// ❌ WRONG - passing custom prop to div
function MyComponent({ isActive, children }) {
  return (
    <div isActive={isActive}>
      {children}
    </div>
  );
}

// ✅ CORRECT - extract custom prop
function MyComponent({ isActive, children }) {
  return (
    <div className={isActive ? 'active' : ''}>
      {children}
    </div>
  );
}

// ✅ CORRECT - using data-* attribute for custom data
function MyComponent({ isActive, children }) {
  return (
    <div data-active={isActive}>
      {children}
    </div>
  );
}

Extract custom props before passing to DOM elements
Filter props when using spread operator on DOM elements
Use proper HTML attributes for common use cases
Create wrapper components that properly handle props

react — error

$// ❌ WRONG - passing custom prop to div
function MyComponent({ isActive, children }) {
  return (
    <div isActive={isActive}>
      {children}
    </div>
  );
}
// ✅ CORRECT - extract custom prop
function MyComponent({ isActive, children }) {
  return (
    <div className={isActive ? 'active' : ''}>
      {children}
    </div>
  );
}
// ✅ CORRECT - using data-* attribute for custom data
function MyComponent({ isActive, children }) {
  return (
    <div data-active={isActive}>
      {children}
    </div>
  );
}
Warning: React does not recognize the `%s` prop on a DOM element.

What this error means

This warning is React's way of telling you that you're trying to pass a prop to a DOM element that isn't a valid HTML attribute. React maintains a list of known HTML attributes and filters out anything that isn't on that list before rendering elements to the DOM. When you create a React component that renders to a DOM element (like `<div>`, `<input>`, or `<button>`), any props you pass that aren't valid HTML attributes will trigger this warning. React does this to prevent invalid HTML from being rendered, which could cause browser errors or unexpected behavior. This commonly happens when you create wrapper components that pass props through to underlying DOM elements, or when using third-party libraries that add custom props. The warning itself doesn't break your application, but it indicates a potential issue with your component design that could lead to bugs or maintenance problems.

Typical symptoms

Warning message in console: "Warning: React does not recognize the `propName` prop on a DOM element"
Custom props passed to DOM elements don't appear in the rendered HTML
Third-party component props cause warnings when used with DOM elements
Wrapper components that spread props to DOM elements trigger warnings
Props like `className`, `style`, or event handlers work fine, but custom props cause warnings
Warning appears for props like `isActive`, `variant`, `size`, or other custom prop names
Application works normally but console shows multiple prop warnings

Common causes

Passing custom props directly to DOM elements instead of extracting them first
Using the spread operator (`...props`) on a component that renders to DOM elements without filtering
Creating wrapper components that forward all props to underlying DOM elements
Third-party UI library components that don't properly filter props before passing to DOM
Custom event handlers or data attributes that aren't prefixed with `data-` or `aria-`
Trying to pass React component props (like `children`, `ref`) to DOM elements without handling
Using prop names that conflict with future HTML standards or React reserved words

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

1Extract custom props before passing to DOM elements

When creating components that render DOM elements, extract custom props before passing the rest to the DOM element:

jsx

// ❌ WRONG - passing custom prop to div
function MyComponent({ isActive, children }) {
  return (
    <div isActive={isActive}>
      {children}
    </div>
  );
}

// ✅ CORRECT - extract custom prop
function MyComponent({ isActive, children }) {
  return (
    <div className={isActive ? 'active' : ''}>
      {children}
    </div>
  );
}

// ✅ CORRECT - using data-* attribute for custom data
function MyComponent({ isActive, children }) {
  return (
    <div data-active={isActive}>
      {children}
    </div>
  );
}

Data attributes (prefixed with data-) are valid HTML and won't trigger warnings.

2Filter props when using spread operator on DOM elements

When using ...props on a DOM element, filter out non-DOM props first:

jsx

// ❌ WRONG - spreads all props including custom ones
function Button({ children, ...props }) {
  return <button {...props}>{children}</button>;
}

// ✅ CORRECT - filter custom props
function Button({ variant, size, children, ...props }) {
  // variant and size are extracted, only DOM props remain in ...props
  const className = `btn btn-${variant} btn-${size}`;
  return (
    <button className={className} {...props}>
      {children}
    </button>
  );
}

// ✅ CORRECT - using a helper function to filter props
import { pickHTMLAttributes } from './utils';

function MyComponent(props) {
  const htmlProps = pickHTMLAttributes(props);
  const customProps = { /* extract custom props */ };
  
  return <div {...htmlProps}>{/* ... */}</div>;
}

Only spread props that are valid HTML attributes.

3Use proper HTML attributes for common use cases

Many custom props can be replaced with standard HTML attributes:

jsx

// Instead of custom props, use standard attributes:

// ❌ Custom boolean prop
<div isVisible={true}>

// ✅ Use hidden attribute or CSS class
<div hidden={!isVisible}>
<div className={isVisible ? 'visible' : 'hidden'}>

// ❌ Custom string prop
<div variant="primary">

// ✅ Use data-* attribute or CSS class
<div data-variant="primary">
<div className="variant-primary">

// ❌ Custom event-like prop
<div onCustomEvent={handler}>

// ✅ Use standard events or data-* with event delegation
div.addEventListener('click", handler)
// Or pass as data attribute and handle in parent
<div data-custom-event="true">

Check MDN for valid HTML attributes for each element type.

4Create wrapper components that properly handle props

When creating wrapper components, explicitly handle which props go where:

jsx

// Good pattern for wrapper components
function InputWrapper({
  label,
  error,
  helperText,
  // Extract Input-specific props
  value,
  onChange,
  type,
  // DOM props for the wrapper div
  className,
  style,
  ...rest
}) {
  return (
    <div className={`input-wrapper ${className}`} style={style}>
      {label && <label>{label}</label>}
      <input
        value={value}
        onChange={onChange}
        type={type}
        {...rest} // Only DOM props for input remain
      />
      {error && <div className="error">{error}</div>}
      {helperText && <div className="helper-text">{helperText}</div>}
    </div>
  );
}

// Usage
<InputWrapper
  label="Email"
  value={email}
  onChange={handleEmailChange}
  type="email"
  placeholder="Enter your email"
  required
/>

This pattern clearly separates wrapper props from DOM element props.

5Handle third-party component prop warnings

When using third-party components that cause prop warnings:

jsx

// If a library component passes invalid props:
import { ThirdPartyButton } from 'some-library';

// Check if the library has a prop filter option
<ThirdPartyButton
  variant="primary"
  filterInvalidProps={true}
/>

// Or wrap it to filter props yourself
function SafeButton(props) {
  const { variant, size, ...rest } = props;
  const className = `btn-${variant} btn-${size}`;
  
  return (
    <ThirdPartyButton
      className={className}
      {...rest}
    />
  );
}

// For styled-components or emotion, use transient props
const StyledButton = styled.button`
  // Use transient prop syntax ($$ prefix)
  background: ${props => props.$variant === 'primary' ? 'blue' : 'gray'};
`;

// Usage with transient prop
<StyledButton $variant="primary">Click</StyledButton>

Check the library documentation for prop filtering options.

6Use React.forwardRef for ref forwarding without prop warnings

When creating components that need ref forwarding:

jsx

// ❌ WRONG - ref gets passed as prop
function MyInput(props) {
  return <input {...props} />;
}

// ✅ CORRECT - use forwardRef
const MyInput = React.forwardRef(function MyInput(props, ref) {
  const { variant, size, ...rest } = props;
  const className = `input input-${variant} input-${size}`;
  
  return (
    <input
      ref={ref}
      className={className}
      {...rest}
    />
  );
});

// ✅ CORRECT - TypeScript with forwardRef
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  variant?: 'default' | 'primary';
  size?: 'sm' | 'md' | 'lg';
}

const MyInput = React.forwardRef<HTMLInputElement, InputProps>(
  ({ variant = 'default', size = 'md', ...props }, ref) => {
    const className = `input input-${variant} input-${size}`;
    return <input ref={ref} className={className} {...props} />;
  }
);

forwardRef properly handles the ref prop without passing it to DOM.

7Configure ESLint to catch prop warnings early

Use ESLint rules to catch prop issues during development:

bash

npm install --save-dev eslint-plugin-react

Add to your .eslintrc.js:

module.exports = {
  plugins: ['react'],
  rules: {
    'react/no-unknown-property': ['error', { ignore: ['data-*', 'aria-*'] }],
    'react/jsx-props-no-spreading': ['error', {
      html: 'ignore',
      custom: 'enforce',
      exceptions: []
    }]
  }
};

For TypeScript, ensure your prop types extend the correct HTML attributes:

typescript

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary';
  // Custom props are separated from HTML props
}

These rules help prevent prop warnings before runtime.

Advanced notes

In React 19+, there's improved handling of custom props with the use hook and better prop filtering. However, the fundamental rule remains: DOM elements should only receive valid HTML attributes.

For complex component libraries, consider using a prop filtering utility: