Implement connectFormArray HOC and FormArray component

[MaurizioVacca]

No description provided.

[slv]

children renderProp inside FieldArray provides array helpers, and FieldArrayMap is already an array mapper, and it provides a Context so you can implement Field like any other top level field:

<FieldArray name="friends">
  {({ add }) => (
    <div>
      <FieldArrayMap>
        {({ index, values, emitChange, removeArrayItem })=> (
          <div key={index}>
            <Field
              name="first_name"
              value={values.first_name}
              onChange={e => emitChange('first_name', e.target.value)} />
            <button onClick={removeArrayItem}>Remove</button>
          </div>
        )}
      </FieldArrayMap>
      <button onClick={add}>Add Friend</button>
    </div>
  )}
</FieldArray>

[MaurizioVacca]

When doing this with HOC approach (assuming we want to support it), we would need two HOC fieldArrayHOC and fieldArrayMapHOC.

The fieldArrayHOC will have a signature similar to connectForm:

const FieldArray = fieldArrayHOC(myArray)(myComponent)

while the mapper will probably need only the target Component:

const FieldArrayMap = fieldArrayMapHOC(myComponent)

nesting order when using this approach needs to be documented in details, otherwise I'm afraid that using the "HOC-way" may results confusing. What do you think?