How to push new FieldArray from outside render function?

Question

I have this code to push new FieldArray every time I click the button, but it is only applicable inside renderContract FieldArray component.

const renderContact = ({ fields, meta: { error } }) => (
    <div>
    {fields.map((contact, index) => (
      <div key={index}>
        <div className="row form-pad">
          <div className="col-md-3">
            <span>Country Code {index + 1}:<span className="requiredField text-danger"> * </span>: </span>
          </div>
          <div className="col-md-7">
            <Field name={`${contact}.landlineCountryCode`}  component={renderField}type="text"/>
          </div>
        </div>
      </div>
    ))}
    <button className="btn btn-primary"  onClick={() => fields.push({})}>
      Add Contact
    </button>
  </div>
)

and render it like this on parent form component:

<FieldArray name="contact" component={renderContact} />

How can I use fields.push({}) outside fieldArray?

EDIT:

I tried this but to no avail:

<button type="button" onClick={() => props.dispatch(arrayPush('PersonalInfoForm', 'contact', [{}]))}> Add Contact</button>

Answer 1

You can dispatch an action arrayPush with the form and the fieldname to effect a fields.push({}) from outside the FieldArray

import { arrayPush } from 'redux-form';

// ...
dispatch(arrayPush('myForm', 'contact', {}));