How to fix Warning: Unknown event handler property `on` in React
React emits this warning when it sees a DOM element receive an `on` prop instead of the specific `onEvent` handler React understands.
Quick fix
Fixes Warning: Unknown event handler property `on`
- Find where `on` is reaching the DOM
- Rename the handler to a specific React event prop
- Keep component-only props off native elements
- Wire the desired event explicitly when you need dynamic mapping
# Warning: Unknown event handler property `on`Warning: Unknown event handler property `on`
What this error means
React’s synthetic event system exposes handler props like `onClick`, `onChange`, `onMouseEnter`, etc. Any unknown property, including a generic `on`, is stripped from the DOM output; React logs this warning so you can correct the prop name or stop forwarding it. The handler never reaches the browser, so the click or other expected event never fires.
Typical symptoms
- Console shows: 'Warning: Unknown event handler property `on`'.
- The warning repeats whenever the offending component re-renders, filling the console’s output.
- The event you intended (click, submit, hover, etc.) never fires because the handler was never attached to the DOM node.
Common causes
- Passing a prop named `on` to a native DOM element (e.g., `<button on={handle}>`).
- Spreading props that include a generic `on` handler onto a DOM node (common when wrapping a component and forwarding its props).
- Defining a component API where the handler is called `on` and forgetting to map it to a real DOM event name before rendering the element.
- Copying markup from another framework or template that expects an `on` attribute instead of React’s camelCase event props.
How to fix "Warning: Unknown event handler property `on`"
The warning pinpoints the DOM element, and the stack trace usually leads to the component that renders it. Search for on= or spreading of props into JSX: const { children, ...props } = rest; return <div {...props}>{children}</div>;. Temporarily log the props to see when on is present.
If the prop should attach to a DOM event, change both the API and its usage so React gets onClick, onChange, onSubmit, etc. Example: const PrimaryButton = ({ onClick, ...props }) => <button onClick={onClick} {...props} />;. The warning disappears because React now recognizes the handler.
If the prop named on is just an internal signal, destructure it before spreading to the DOM: const { on, ...domProps } = props; return <div {...domProps} />;. Use the handler internally or pass it to another child instead of a <div> so React never sees on on a DOM node.
Sometimes you have an API like on={handle} but want to decide the actual DOM event at render time. Map it manually: <button onClick={props.on} /> or build a helper that translates on into the correct onEvent prop before spreading. Avoid letting on slip through to <button> without a real event name.
Advanced notes
React 17+ now ignores unknown DOM attributes but still warns so you can keep the console quiet. Passing on to web components is fine because custom elements accept arbitrary attributes, but native HTML elements still expect camelCase handler names. If you must attach a handler after the element renders, use a ref and call addEventListener yourself.
Frequently asked questions
- What does "Warning: Unknown event handler property `on`" mean?
- React’s synthetic event system exposes handler props like onClick, onChange, onMouseEnter, etc. Any unknown property, including a generic on, is stripped from the DOM output; React logs this warning so you can correct the prop name or stop forwarding it. The handler never reaches the browser, so the click or other expected event never fires.
- How do I fix "Warning: Unknown event handler property `on`"?
- React emits this warning when it sees a DOM element receive an on prop instead of the specific onEvent handler React understands.
- What causes "Warning: Unknown event handler property `on`"?
- Passing a prop named on to a native DOM element (e.g., <button on={handle}>). Spreading props that include a generic on handler onto a DOM node (common when wrapping a component and forwarding its props). Defining a component API where the handler is called on and forgetting to map it to a real DOM event name before rendering the element.
- Is the "Warning: Unknown event handler property `on`" error serious?
- It is a low-severity error — more of a blocker than a risk. The steps above resolve it.