React emits this warning when it sees a DOM element receive an `on` prop instead of the specific `onEvent` handler React understands.
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.
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.
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.
React.FC expects children prop to be defined
React.FC no longer includes implicit children prop
Warning: You provided a `selected` prop to a form field without an `onChange` handler
You provided a 'selected' prop without an onChange handler
Failed to load source map from suspense chunk
How to fix "Failed to load source map from suspense chunk" in React
Prop spreading could cause security issues
Prop spreading could cause security issues
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