title: Uncaught TypeError: _this.props.validatorListener is not a function
body: <p>I am implementing form validation inside my material-ui TextField using the library <code>react-form-validator-core</code> as follows:</p>
  
  <p>It just looks like the documentation example, where I am extending the ValidatorComponent. This allows accessing different props and <code>isValid</code> from the parent state.  </p>
  
  <h3>TextInput component</h3>
  
  <pre><code>class TextInput extends ValidatorComponent {
    /**
     * render the component
     * @returns {object} JSX
     */
    render() {
      const {
        variant,
        id,
        label,
        autoFocus,
        multiline,
        rows,
        error,
        errorMessages,
        validators,
        requiredError,
        helperText,
        withRequiredValidator,
        ...rest
      } = this.props;
  
      const { isValid } = this.state;
  
      return (
        &lt;TextField
          {...rest}
          fullWidth
          margin="normal"
          variant={variant}
          id={id}
          name={id}
          label={label}
          autoFocus={autoFocus}
          multiline={multiline}
          rows={rows}
          error={!isValid || error}
          helperText={(!isValid &amp;&amp; this.getErrorMessage()) || helperText}
        /&gt;
      );
    }
  }
  
  TextInput.propTypes = {
    id: PropTypes.string.isRequired,
    label: PropTypes.string.isRequired,
    error: PropTypes.bool,
    helperText: PropTypes.string,
    variant: PropTypes.string,
    autoFocus: PropTypes.bool,
    multiline: PropTypes.bool,
    rows: PropTypes.string,
  };
  
  TextInput.defaultProps = {
    error: false,
    helperText: undefined,
    variant: 'outlined',
    autoFocus: false,
    multiline: false,
    rows: '8',
  };
  
  export default TextInput;
  </code></pre>
  
  <h3>My Form</h3>
  
  <p>I am using the Vali</p>
  
  <pre><code>&lt;ValidatorForm
   className={classes.form}
    autoComplete="off"
    noValidate
    onSubmit={this.handleSubmit}
  &gt;
    &lt;TextInput
      id="email"
      label="Email"
      autoFocus={false}
      onChange={this.onChange}
      value={email}
      validators={['required', 'isEmail']}
      errorMessages={['this field is required', 'email is not valid']}
    /&gt;
    &lt;Box marginTop={2}&gt;
      &lt;Button variant="contained" type="submit" className="button" fullWidth&gt;
        send message
      &lt;/Button&gt;
    &lt;/Box&gt;
  &lt;/ValidatorForm&gt;
  </code></pre>
  
  <h3>Problem</h3>
  
  <p>I don't understand why every time I enter a value on the TextField, I am getting this error. I would like to know the effective way of using this library alongside material-ui.</p>
  
  <p>Here is the way the two functions are implemented </p>
  
  <h3>onChange</h3>
  
  <pre><code>onChange = e =&gt; {
      e.preventDefault();
      const { name, value } = e.target;
      this.setState({
        [name]: value,
      });
    };
  </code></pre>
  
  <h3>handleSubmit</h3>
  
  <pre><code>  handleSubmit() {
      const { email } = this.state;
      console.log(email);
    }
  </code></pre>