Recently I’ve been playing with React, and one of the specific techniques is the Higher Order Components. In this case I created a HOC to validate some input. The following is the component I created:

However when writing tests I had this error:

  ● Console

    console.error
      Warning: Unknown event handler property `onValueChanged`. It will be ignored.
          at div
          at FormControl (/workspaces/probability/src/probability-ui/node_modules/@material-ui/core/FormControl/FormControl.js:90:24)
          at WithStyles(ForwardRef(FormControl)) (/workspaces/probability/src/probability-ui/node_modules/@material-ui/styles/withStyles/withStyles.js:67:31)
          at TextField (/workspaces/probability/src/probability-ui/node_modules/@material-ui/core/TextField/TextField.js:84:28)
          at WithStyles(ForwardRef(TextField)) (/workspaces/probability/src/probability-ui/node_modules/@material-ui/styles/withStyles/withStyles.js:67:31)
          at ProbabilityInputValidation (/workspaces/probability/src/probability-ui/src/withProbabilityInputValidation.js:7:13)

      at printWarning (node_modules/react-dom/cjs/react-dom.development.js:67:30)
      at error (node_modules/react-dom/cjs/react-dom.development.js:43:5)
      at validateProperty$1 (node_modules/react-dom/cjs/react-dom.development.js:3448:9)
      at warnUnknownProperties (node_modules/react-dom/cjs/react-dom.development.js:3559:21)
      at validateProperties$2 (node_modules/react-dom/cjs/react-dom.development.js:3583:3)
      at validatePropertiesInDevelopment (node_modules/react-dom/cjs/react-dom.development.js:8765:5)
      at setInitialProperties (node_modules/react-dom/cjs/react-dom.development.js:9041:5)
      at finalizeInitialChildren (node_modules/react-dom/cjs/react-dom.development.js:10201:3)

Luckily this is a reasonably described error and it didn’t take much searching to get to the right answer on Stack Overflow. The correct thing to do is to remove the offending property before passing to the wrapped component:

const { error, onChange, onValueChanged, ...finalProps } = this.props;

Resulting in this updated HOC: