Search code examples
reactjsredux-formreact-redux-form

Redux Form: Accessing FieldArray fields prop from outside wrapped component


I have a form that consists of several classical fields and two FieldArray's. These FieldArrays are in separate sections but are interrelated. When I add an item to FieldArray A, (a row of different kinds of fields), another row for the FieldArray B should be built. FieldArray A and B are different in the sense that they represent a different collection and structure of fields, however, when a row is added into A, a row must be added into B.

In order to add a row to FieldArray A, I follow the documented method of using the push method into the prop fields, inside the wrapped component of FieldArray A. However I have no access to the prop fields of FieldArray B. That prop is only accessible from within the wrapped component inside FieldArray B.

Is there another way or a method to get access to the prop fields of FieldArray B from outside of it? formValues() or formValuesSelector() are not useful.


Solution

  • Okay so after digging the documentation of redux-form for hidden features... i found out that you can import from redux-form its action creators, particularly arrayPush which lets you push a new "row" of fields by specifying the formid, fieldarray name and value like this:

    Given a redux-form with id: 'myForm', a FieldArray with name 'nested_model_attributes' and a value = [subfield1: 'A', subfield2: 2, ... ]

    you can dispatch the following:

    arrayPush('myForm', 'nested_model_attributes', value)

    And voila... the FieldArray adds a new row of fields :). In this case, this is the FieldArray B i was referring to in the original question. All i need to do is dispatch this method from where i pushed a new row of fields to FieldArray A.