How to fix Warning: Invalid DOM property `on` on a non-custom element in React

ReactBEGINNERMEDIUMUpdated Dec 9, 2025· 114 views

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.

Quick fix

Fixes Warning: Invalid DOM property `on` on a non-custom element

// WRONG - will trigger warning
<button on={handleClick}>Click me</button>

// CORRECT - use camelCase React event handler
<button onClick={handleClick}>Click me</button>
  1. Use proper React event handler syntax
  2. Filter props before spreading to DOM elements
  3. Use data- prefix for custom attributes
  4. Review event handler names and capitalize correctly
react — error
// WRONG - will trigger warning
<button on={handleClick}>Click me</button>
// CORRECT - use camelCase React event handler
<button onClick={handleClick}>Click me</button>
Warning: Invalid DOM property `on` on a non-custom element

What this error means

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.

Typical symptoms

  • Console shows warning: 'Invalid DOM property `on` on a non-custom element'
  • The warning appears when rendering a specific component
  • Application still works but console is cluttered with warnings
  • The problematic attribute is not being applied to the DOM element

Common causes

  1. Using lowercase 'on' as an attribute instead of proper React event handler syntax like onClick
  2. Spreading component props directly onto a DOM element without filtering out custom props
  3. Accidentally passing a prop named 'on' from parent to child component and then to a DOM element
  4. Attempting to use custom attributes without data- or aria- prefixes on standard HTML elements
  5. Confusion between HTML event attributes (onclick, onchange in lowercase) and React event handlers (onClick, onChange in camelCase)

How to fix "Warning: Invalid DOM property `on` on a non-custom element"

1Use proper React event handler syntax

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:

jsx
// WRONG - will trigger warning
<button on={handleClick}>Click me</button>

// CORRECT - use camelCase React event handler
<button onClick={handleClick}>Click me</button>
2Filter props before spreading to DOM elements

If you're spreading component props onto a DOM element, filter out non-DOM props first:

jsx
// 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:

jsx
const MyButton = ({ customProp, ...rest }) => (
  <button {...rest}>Click</button>
);
3Use data- prefix for custom attributes

If you need to pass custom attributes to a DOM element, use the data- prefix (which HTML allows) or use aria- for accessibility attributes:

jsx
// 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>
4Review event handler names and capitalize correctly

Make sure all event handlers use camelCase and are valid React events:

jsx
// 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>
5Check for prop spreading from custom components

If the warning occurs in a custom component, verify that the component isn't spreading non-DOM props to its underlying DOM element:

jsx
// 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>
);

Advanced notes

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.

Frequently asked questions

What does "Warning: Invalid DOM property `on` on a non-custom element" mean?
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. ) 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.
How do I fix "Warning: Invalid DOM property `on` on a non-custom element"?
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.
What causes "Warning: Invalid DOM property `on` on a non-custom element"?
Using lowercase 'on' as an attribute instead of proper React event handler syntax like onClick Spreading component props directly onto a DOM element without filtering out custom props Accidentally passing a prop named 'on' from parent to child component and then to a DOM element
Is the "Warning: Invalid DOM property `on` on a non-custom element" error serious?
It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Official resources & further reading