How to model a form with a dynamic number of useFieldArray fields (i.e. in a form builder)?

[tibbe]

In our app we have a form builder where the structure of the form is dynamic. In other words, we only know the number of fields in the form and their names at runtime.

Furthermore, one of the form builder's fields is a table, which has a variable number of rows. A user could include several such table fields in a form.

The form is defined along the lines of

// Simple text and number fields. `name` is a unique key for the field.
type ScalarField = {kind: 'text'; name: string} | {kind: 'number'; name: string};

// A table field. A table has rows and each column is a field of one of the above scalar types.
type TableField = {kind: 'table', columns: ScalarField[]; name: string};

// The fields are only known at runtime:
type Field = ScalarField | TableField;
type Form = Field[];

Very simplified, the rendering looks like:

function DynamicForm({fields}: {fields: Form}) {
  // `defaultValues` are created by looping over `fields`.
  const {control} = useForm({defaultValues: ...});

  // Dynamically render the form.
  return fields.map(field => {
    switch (field.kind) {
      case 'text':
        return <Controller
          name={field.name}
          render={({field: {onChange, value}}) =>
            <TextInput onChangeText={onChange} value={value} />
          }
        />
      case 'number': ...
      case 'table': ???
    }
  });
}

The question is how to use react-hook-form to model TableField. In principle we'd want a dynamic number of calls to useFieldArray(), like so:

const fieldArraysByName: Record<string, UseFieldArrayReturn<...>> = {};
for (const field of fields) {
  if (field.kind === 'table') {
    fieldArraysByName[field.name] = useFieldArray({control, name: field.name});
  }
}

Then we'd do

// First we iterate over the rows, which are stored by the `useFieldArray`, and
// then over the column kinds, which are defined by our data model.
case 'table':
  return fieldArraysByName[field.name].fields.map((formField, index) => (
    <View>
      {field.map(col =>
       <Controller control={control}
        id={formField.id} name={`${field.name}.{index}.{col.name}`} render={
         // Render e.g. a TextInput if `col.kind === "text"`.
       } />}
    </View>
  ));

This has (at least) two issues I can see:

• We're calling a hook conditionally (in a loop).
• We're using a dynamic name for useFieldArray() (docs for useFieldArray say: "Note: Do not support dynamic name.")

How would you model this using react-hook-form?

[freddygarcia]

Similar issue, this helped me