Redux-Form—Create Password Field with »retype«

Question

I am building a redux form and I would like to create a »Retype Password« field which is rendered next to the password field. I have this code:

const renderRow = (field) => {
  return (
    <div className={`form-row ${field.type}`}>
      <label>{field.label}</label>
      <Field field={field} component={renderPassword} name={field.name} />
    </div>
  );
}


const renderPassword = ({field, input, meta: { error, touched }}) => {
  return (
    <div className="password-inputs-wrap">
      <input type="password" {...input} />
      <input type="password" {...input} name="password-retype" />
      {touched && error && <RenderError error={error} />}
    </div>
  );
}

Right now this renders two password fields, but changing one, changes the other at the same time.

The renderRow is a bit simplified here, since the component for that field is not hard coded as show here. So this password field is an exception, since it consists of two <input>s. For all other fields, which consist of a single <input>/<select />, etc, it works fine.

How can I »decouple« this retype <input> from the first one?

Answer 1

You need two fields (two Fields).