Use FieldArray to deal with multiple similar fields

If the user taps the button to add a discount code, you can make the discount code required by adding validate={[required]} to the definition of the Field.

export const discounts = ({ fields }) => (
  <div className="custom-field-array-container">
    {fields.map((code, index) => (
      <div key={index} className="field-array-item">
        <Field
          name={code}
          type="text"
          component={customInput}
          label={`Discount Code #${index + 1}`}
          autoFocus
          validate={[required]}
        />
        <button type="button" onClick={() => fields.remove(index)}>
          &times;
        </button>
      </div>
    ))}
    <button type="button" onClick={() => fields.push()}>
      Add {!fields.length ? 'Discount Code(s)' : 'Another'}
    </button>
  </div>
);

How can you pre-populate or initialize the fields based on existing discount codes? For example, in RegisterForm.js, how can you pass down to the component some existing values?

I'm looking for something like this:

<FieldArray name="discountCodes" component={discounts} fields={ this.state.discountCodoes }/>

How can you pre-populate or initialize the fields based on existing discount codes?

Hi Justin, you can do this with this.props.initialize inside a redux-form component. Try adding this:

  componentWillMount() {
    this.props.initialize({ discountCodes: ['hello', 'world'] })
  }

Thanks Rory. That did the trick. Here's a working sample:

https://codesandbox.io/s/3x7p6pz0jq

I've got another question/concern about FieldArray's but I'll post it after I get a good working sample.

Okay Rory, here is my sample:

https://codesandbox.io/s/q3rxn5oj76 (See RegisterForm.js to see what I'm trying to do.

In my project, I can't have the "add more discount codes" button within the component that generates the fields. It has to be external to the FieldArray due to design layout issues.

So, how can I have an external button that triggers pushing onto the fields array?

Rory,

I finally found a solution for this via StackOverflow: https://stackoverflow.com/a/41607591/75644

When I get a chance, I'll update my sample above to include the fix for this.

Here's my solution to this problem:

https://calendee.com/2018/09/22/adding-to-redux-form-fieldarray/