useFieldArray

A custom hook that exposes convenient methods to perform operations with a list of dynamic inputs that need to be appended, updated, removed etc. • Demo • Video

@example

function App() {
  const { register, control, handleSubmit, reset, trigger, setError } = useForm({
    defaultValues: {
      test: []
    }
  });
  const { fields, append } = useFieldArray({
    control,
    name: "test"
  });

  return (
    <form onSubmit={handleSubmit(data => console.log(data))}>
      {fields.map((item, index) => (
         <input key={item.id} {...register(`test.${index}.firstName`)}  />
      ))}
      <button type="button" onClick={() => append({ firstName: "bill" })}>
        append
      </button>
      <input type="submit" />
    </form>
  );
}

function useFieldArray<TFieldValues extends FieldValues = FieldValues, TFieldArrayName extends FieldArrayPath<TFieldValues> = FieldArrayPath<TFieldValues>, TKeyName extends string = "id">(props: UseFieldArrayProps<TFieldValues, TFieldArrayName, TKeyName>): UseFieldArrayReturn<TFieldValues, TFieldArrayName, TKeyName>;

useFieldArray<TFieldValues extends FieldValues = FieldValues, TFieldArrayName extends FieldArrayPath<TFieldValues> = FieldArrayPath<TFieldValues>, TKeyName extends string = "id">(props: UseFieldArrayProps<TFieldValues, TFieldArrayName, TKeyName>): UseFieldArrayReturn<TFieldValues, TFieldArrayName, TKeyName>

[src]

§Type Parameters

TFieldValues extends FieldValues = FieldValues

[src]

TFieldArrayName extends FieldArrayPath<TFieldValues> = FieldArrayPath<TFieldValues>

[src]

TKeyName extends string = "id"

[src]

§Parameters

props: UseFieldArrayProps<TFieldValues, TFieldArrayName, TKeyName>

[src]

useFieldArray props

§Return Type

UseFieldArrayReturn<TFieldValues, TFieldArrayName, TKeyName>

[src]

methods - functions to manipulate with the Field Arrays (dynamic inputs) UseFieldArrayReturn