Warning: Unknown event handler property `onHeaderClick`. It will be ignored

Question

I am creating Higher order components for passing some props with another component. But getting the warning for Unknown event handler property.

 export class TableHeaderRow extends React.PureComponent{
     render() {
            const customCell = WrappedCellComponent(Cell,this.props.onHeaderClick, this.props.isMasterChecked, this.props.onTableCheckBoxselection);
            return (
                  <TableHeaderRowBase
                        cellComponent={customCell}
                        rowComponent={Row}
                        contentComponent={Content}
                        titleComponent={Title}
                        showSortingControls={true}
                        sortLabelComponent={this.props.sortLabelComponent}
                        groupButtonComponent={(data: any) : any => null}
                        showGroupingControls={false}
                        {...this.props}
                    />
            )
        }
    }

const WrappedCellComponent = (WrappedComponent, onHeaderClick,checkIfMasterChecked, onTableCheckBoxSelection) => {

    class HOC extends React.Component {
        render() {
            return <WrappedComponent 
                    {...this.props}  
                    onHeaderClick={onHeaderClick} 
                    onTableCheckBoxSelection={onTableCheckBoxSelection}  
                    checkIfMasterChecked={checkIfMasterChecked} 
                   />;

        }
    }
    return HOC;
};

Events are working, but I am getting error in chrome devTool (i.e. Warning: Unknown event handler property onTableCheckBoxSelection. It will be ignored.)

score 36 · Answer 1 · answered Aug 12 '20 at 22:05

36

This basically happens when you pass a prop with a name starting with on, regardless of its case. React assumes and tries to bind it with javascript events like onClick, onKeypress, etc

answered Aug 12 '20 at 22:05

Abhinav Nigam

503
4
5

I rename on prefix to handle but the error changed to 'next-dev.js?3515:25 Warning: React does not recognize the `handleMinimizeClick` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `handleminimizeclick` instead. If you accidentally passed it from a parent component, remove it from the DOM element.' – MehranTM May 22 '22 at 11:04
in my case my problem resolved by preventing my parent prop passed to child resizable div using this code: `delete resizableProps.handleMinimizeClick;` – MehranTM May 22 '22 at 11:57
my issue was strange, two methods used, onHide and onConfirm. onHide works, and onConfirm failed. Renaming to lowercase worked but I decided to clone and remove the onConfirm from cloned. `const modalProps = Object.assign({}, props); delete modalProps.onConfirm;` then my button works without warnings `onClick={() => { props.onConfirm(); modalProps.onHide(); }}` – Junior Mayhé Feb 25 '23 at 11:46

score 12 · Answer 2 · answered Dec 27 '18 at 13:08

12

The error is well documented:

The unknown-prop warning will fire if you attempt to render a DOM element with a prop that is not recognized by React as a legal DOM attribute/property. You should ensure that your DOM elements do not have spurious props floating around.

answered Dec 27 '18 at 13:08

Mosè Raguzzini

15,399
1
31
43

2

Thanks for the suggestion. I had already explored about "Unknown Prop Warning". But the problem is I am just passing action as props nothing different. You can see. – Dheeraj kumar Rao Dec 28 '18 at 06:26
1

what's in the render of TableHeaderRowBase ? maybe it contains a DOM element where some props is explicitly setted or destructured with ...this.props – Mosè Raguzzini Dec 28 '18 at 09:00

score 3 · Answer 3 · answered Feb 02 '23 at 14:55

Found the correct answer in another post. https://stackoverflow.com/a/50196327/1734744 The problem was with passing props from parent to child using {...props} which may unintentionally pass the parent's event handlers to the child.

Also, I was passing the {...props} to a div (the container of the child component) and my custom event handlers were not recognized by div (native html tag)

Hope this helps.

Stephen Paul · Answer 4 · 2023-07-27T12:20:16.230

As already mentioned, this happens because if you attempt to render a DOM element with a prop that is not recognized by React as a legal DOM attribute/property. I needed a generic way of removing all props that are also functions in Typescript.

Custom hook:

export const usePropsWithoutFunctions = <P extends object>(props: P) => {
  return (Object.keys(props) as Array<keyof P>)
    .filter(key => typeof (props[key]) !== 'function')
    .reduce((prev, curr) => ({ ...prev, [curr]: props[curr] }), {});
}

Implementation:

export const MyComponent = (props: MyComponentProps) => {
  const propsRev = usePropsWithoutFunctions(props);
  return (
    <div 
      {...propsRev}
    />
  );
}

Warning: Unknown event handler property `onHeaderClick`. It will be ignored

4 Answers4

Linked