This warning occurs when you use a non-standard HTML attribute like 'on' on a React DOM element. React warns about DOM properties that are not recognized or valid, which typically means using incorrect attribute names or spreading unvalidated props to DOM elements.
React validates all properties passed to DOM elements and warns when it encounters attributes that are not recognized or are invalid according to HTML standards. The 'on' attribute is not a valid HTML property—it's often confused with React event handlers (onClick, onChange, etc.) or HTML event attributes (onclick, onchange). This warning indicates that you're either using an incorrect lowercase attribute name, accidentally spreading props to a DOM element, or trying to add a custom property that doesn't exist in standard HTML.
Replace any lowercase 'on' attribute with the correct camelCase React event handler. For example, if you meant to handle a click event, use onClick instead of on:
// WRONG - will trigger warning
<button on={handleClick}>Click me</button>
// CORRECT - use camelCase React event handler
<button onClick={handleClick}>Click me</button>If you're spreading component props onto a DOM element, filter out non-DOM props first:
// WRONG - spreads all props including custom ones
const MyButton = (props) => <button {...props}>Click</button>;
// CORRECT - filter custom props
const MyButton = ({ isLoading, ...domProps }) => (
<button {...domProps}>Click</button>
);Or use destructuring to separate DOM props from custom props:
const MyButton = ({ customProp, ...rest }) => (
<button {...rest}>Click</button>
);If you need to pass custom attributes to a DOM element, use the data- prefix (which HTML allows) or use aria- for accessibility attributes:
// WRONG - will trigger warning
<div on="custom">Content</div>
// CORRECT - use data- prefix for custom data
<div data-on="custom">Content</div>
// CORRECT - use aria- prefix for accessibility
<div aria-on="true">Content</div>Make sure all event handlers use camelCase and are valid React events:
// WRONG - lowercase event attribute
<input onchange={handleChange} />
// CORRECT - camelCase React event handler
<input onChange={handleChange} />
// Other common event handlers:
<button onClick={handleClick}>Button</button>
<input onFocus={handleFocus} />
<div onMouseEnter={handleEnter}>Hover me</div>
<form onSubmit={handleSubmit}>Form</form>If the warning occurs in a custom component, verify that the component isn't spreading non-DOM props to its underlying DOM element:
// WRONG - MyComponent spreads all props to div
const MyComponent = (props) => <div {...props}>{props.children}</div>;
// When used with custom props
<MyComponent on={value} data="test">Content</MyComponent>
// This spreads 'on' to the div, causing the warning
// CORRECT - extract and use only valid DOM props
const MyComponent = ({ on, children, ...domProps }) => (
<div {...domProps}>{children}</div>
);React performs strict validation on DOM properties to ensure code quality and catch typos. This warning is part of React's effort to prevent developers from accidentally creating invalid HTML attributes that won't have any effect. In React 17+, unrecognized attributes are silently ignored rather than causing errors, but React still warns about them to help catch mistakes early. Custom HTML elements (Web Components) can accept any attribute, but standard HTML elements have a specific set of valid properties and attributes. If you're using a Web Component, you can use the 'is' attribute or explicitly pass properties to the element reference. For complex prop filtering in higher-order components, consider using a library like lodash or creating a utility function to separate DOM props from component props.
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
Cannot use private fields in class components without TS support
Cannot use private fields in class components without TS support
Cannot destructure property 'xxx' of 'undefined'
Cannot destructure property of undefined when accessing props
useNavigate() may be used only in the context of a <Router> component.
useNavigate() may be used only in the context of a Router component
Cannot find module or its corresponding type declarations
How to fix "Cannot find module or type declarations" in Vite