adding-to-redux-form-fieldarray-3.js

import React, { Component } from "react";
import { connect } from "react-redux";
import { Field, FieldArray, reduxForm, arrayPush } from "redux-form";
import { customInput, customSelect, discounts } from "./fields";
import capitalize from "capitalize";
import {
  required,
  minLength,
  maxLength,
  matchesPassword,
  asyncValidate
} from "../validation";
import "./RegisterForm.css";

class RegisterForm extends Component {
  componentWillMount() {
    this.props.initialize({ discountCodes: ["ABC200", "XYZ500"] });
  }

  render() {
    const { handleSubmit } = this.props;

    const addFieldsExternally = () => {
      this.props.pushArray("register", "discountCodes", "");
    };

    return (
      <form onSubmit={handleSubmit}>
        <Field
          name="firstname"
          component={customInput}
          type="text"
          label="First Name"
          validate={[required]}
          normalize={capitalize}
        />

        <FieldArray name="discountCodes" component={discounts} />

        <button type="submit">Submit</button>

        <button
          type="button"
          onClick={addFieldsExternally}
          style={{ marginTop: 20 }}
        >
          Add Discount Codes from External Source
        </button>
      </form>
    );
  }
}

const mapDispatchToProps = {
  // NOTE: This MUST be aliased or it will not work
  pushArray: arrayPush
};

RegisterForm = reduxForm({
  form: "register",
  asyncValidate,
  asyncBlurFields: ["username"]
})(RegisterForm);

export default connect(
  null,
  mapDispatchToProps
)(RegisterForm);