Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.)

like image 895
Dheeraj kumar Rao Avatar asked Dec 27 '18 12:12

Dheeraj kumar Rao


2 Answers

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

like image 83
Abhinav Nigam Avatar answered Nov 18 '22 08:11

Abhinav Nigam


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.

like image 9
Mosè Raguzzini Avatar answered Nov 18 '22 07:11

Mosè Raguzzini