Abstract away Array field component

[vsnig]

As in Arrays documentation, to create array component we need both field and form (to create subfields)

So it can't be added neither to fieldComponents, nor to formComonents

Is there a way to abstract it away, b/c it becomes very verbose to have as it is in the form?

<form.Field name="people" mode="array">
          {(field) => {
            return (
              <div>
                {field.state.value.map((_, i) => {
                  return (
                    <form.Field key={i} name={`people[${i}].name`}>
                      {(subField) => {
                        return (
                          <div>
                            <label>
                              <div>Name for person {i}</div>
                              <input
                                value={subField.state.value}
                                onChange={(e) =>
                                  subField.handleChange(e.target.value)
                                }
                              />
                            </label>
                          </div>
                        )
                      }}
                    </form.Field>
                  )
                })}
                <button
                  onClick={() => field.pushValue({ name: '', age: 0 })}
                  type="button"
                >
                  Add person
                </button>
              </div>
            )
          }}
        </form.Field>

[LeCarbonator]

You can use withForm which will accept the index as prop. Then, you can quickly create the location of the nested field using that index without all the indentation.