title: Warning when passing a function to a wrapped component prop
body: <p>At present I have a <code>ValidatedTextField</code> component that wraps a <code>TextField</code> component and takes in a <code>validationerror</code> property that is used to communicate between the child and parent and consumed by either the <code>onChange</code> or <code>onBlur</code>  event of the textbox.</p>
  
  <p>However when passing a function to this attribute I receive the following error: </p>
  
  <blockquote>
    <p>Invalid value for prop <code>validationerror</code>
        on  tag. Either remove it from the element, or pass a string or number value to keep 
        it in the DOM. For details, 
        see <a href="https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html#changes-in-detail" rel="nofollow noreferrer">https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html#changes-in-detail</a></p>
  </blockquote>
  
  <p>I have read through the link which says that data and aria attributes can still be passed freely, however switching to using data attribute results in the same error. I cannot think how else to send the function to update the parents error back.</p>
  
  <p><strong>From the wrapper</strong></p>
  
  <pre><code>&lt;ValidatedTextField
      type="text"
      variant="standard"
      required={true}
      validateon={'onChange'}
      validate={[Validations.Required, Validations.allowedNameCharacters]}
      validationerror={(validationError: boolean) =&gt; this.setState({ HasError: validationError }) }
      onChange={(event: any) =&gt; this.setState({ textboxvalue: event.target.value })}
      value={this.state.textboxvalue}
  /&gt;
  </code></pre>
  
  <p><strong>and the wrapped component</strong></p>
  
  <pre><code>import * as React from 'react';
  import * as _ from 'lodash'
  import { IValidationItem } from '../../../Interfaces/IValidationItem'
  import TextField, { TextFieldProps } from "@material-ui/core/TextField";
  
  interface IValidatedTextFieldProps {
      validate?: IValidationItem[],
      validateon?: 'onBlur' | 'onChange',
      validationerror?: (hasError?: boolean) =&gt; void
  }
  
  interface IValidatedTextFieldState {
      validationErrorMessage: string,
      validationError: boolean
  }
  
  
  type ValidatedTextFieldAllProps = IValidatedTextFieldProps &amp; TextFieldProps
  
  class ValidatedTextField extends React.Component&lt;ValidatedTextFieldAllProps, IValidatedTextFieldState&gt; {
  
      public constructor(props: ValidatedTextFieldAllProps) {
          super(props);
          this.state = {
              validationErrorMessage: "",
              validationError: false
          }
      }
      public validationWrapper = (event: any) =&gt; {
  
          const { validate, } = this.props;
          return !validate ? "" : _.forEach(validate, (validationItem: IValidationItem) =&gt; {
              const result = !validationItem.func(event.target.value)
  
              if (result) {
                  this.setState({ validationErrorMessage: validationItem.validationMessage });
                  this.setState({ validationError: result })
                  this.callParentValidationErrorMethod(result)
                  return false;
              }
              else {
                  this.setState({ validationErrorMessage: "" });
                  this.setState({ validationError: result })
                  this.callParentValidationErrorMethod(result)
                  return;
              }
          });
      };
  
      public onBlurValidation = (event: any) =&gt; {
          const { onBlur, validateon, validate } = this.props;
          if (_.isFunction(onBlur)) { onBlur(event); }
          if (validateon === "onBlur" &amp;&amp; !!validate) { this.validationWrapper(event); 
      }
  
      public onChangeValidation = (event: any) =&gt; {
          const { onChange, validateon, validate } = this.props;
          if (_.isFunction(onChange)) { onChange(event); }
          if (validateon === "onChange" &amp;&amp; !!validate) { this.validationWrapper(event); };
      }
      public callParentValidationErrorMethod = (hasError: boolean) =&gt; {
          if(_.isFunction(this.props.validationerror)) {
              this.props.validationerror(hasError);
          }
      }
  
      public render() {
          const { validationErrorMessage, validationError } = this.state
  
  
          return (&lt;TextField
              {...this.props}
              onBlur={(event: any) =&gt; { this.onBlurValidation(event); }}
              onChange={(event: any) =&gt; { this.onChangeValidation(event); }
              }
              error={validationError}
              helperText={validationErrorMessage}
          /&gt;)
      }
  }
  
  export default ValidatedTextField;
  </code></pre>
  
  <p>Additional info: Not seen in IE only chrome so far and currently React v16.6</p>