CODEWITHSUNDEEP
javascriptreactjsreact-reduxredux-form
Miles M.
Miles M.

Reputation: 4169

Redux Form returns unexpected error with simple validation. Why?

I'm creating a new form with the help of Redux Form, following this simple example of a form validation I'm getting an error message I don't know where it's coming from:

const renderTextField = ({
  input, label, meta: { touched, error }, children, type, placeholder,
}) => (
  <TextField
    className="material-form__field"
    label={label}
    type={type}
    error={touched && error}
    children={children}
    value={input.value}
    placeholder={placeholder}
    onChange={(e) => {
      e.preventDefault();
      input.onChange(e.target.value);
    }}
  />
);

renderTextField.propTypes = {
  input: PropTypes.shape().isRequired,
  label: PropTypes.string,
  meta: PropTypes.shape({
    touched: PropTypes.bool,
    error: PropTypes.string,
  }),
  children: PropTypes.arrayOf(PropTypes.element),
  type: PropTypes.string,
  placeholder: PropTypes.string,
};

renderTextField.defaultProps = {
  meta: null,
  label: '',
  children: [],
  type: 'input',
  placeholder: '',
};

const validate = (values) => {
  const errors = {};
  if (values.new_password_check !== values.new_password) {
    errors.new_password = 'ERROR';
  }
  console.log(errors);
  return errors;
};

class AccountSettings extends PureComponent {
  static propTypes = {
    handleSubmit: PropTypes.func.isRequired,
    reset: PropTypes.func.isRequired,
  };

  render() {
    const { handleSubmit, reset } = this.props;
    return (
      <form className="material-form" onSubmit={handleSubmit}>
        <div>
          <span className="material-form__label">Password (Optionnal)</span>
          <Field
            name="new_password"
            component={renderTextField}
            placeholder="Fill out this field only if you want to change your password"
            type="password"
          />
        </div>
        <div>
          <span className="material-form__label">Password Check (Optionnal)</span>
          <Field
            name="new_password_check"
            component={renderTextField}
            placeholder="Re-enter your new password for security reason if you wish to change it"
            type="password"
          />
        </div>
        <div>
          <span className="material-form__label">Current Password</span>
          <Field
            name="password"
            component={renderTextField}
            placeholder="Enter your current password to confirm the changes"
            type="password"
          />
        </div>
        <ButtonToolbar className="form__button-toolbar">
          <Button color="primary" type="submit">Update profile</Button>
          <Button type="button" onClick={reset}>
            Cancel
          </Button>
        </ButtonToolbar>
      </form>
    );
  }
}

export default reduxForm({
  form: 'profile_settings_form', // a unique identifier for this form
  validate, // <--- validation function given to redux-form
})(AccountSettings);

When trying to validate values.new_password_check !== values.new_password whether it's true or not I always get the following error in my console:

Failed prop type: Invalid prop `error` of type `string` supplied to `ForwardRef(FormControl)`, expected `boolean`.

I do not do any propType for error, and my newly created error variable is errors. I really do not understand where this is coming from.

Upvotes: 0

Views: 138

Answers (1)

Brian Thompson
Brian Thompson

Reputation: 14355

error needs to be a boolean not a string. To display your error message do this instead:

<TextField
    className="material-form__field"
    label={label}
    type={type}
    error={(touched && (typeof error !== 'undefined' && error != '')} // This says there is an error
    helperText={touched && error} // This will show the error message
    children={children}
    value={input.value}
    placeholder={placeholder}
    onChange={(e) => {
      e.preventDefault();
      input.onChange(e.target.value);
    }}
/>

Upvotes: 2

Related Questions