useFieldArray | /deps/react-hook-form.ts | netzo@0.4.72

function useFieldArray

import { useFieldArray } from "https://deno.land/x/netzo@0.4.72/deps/react-hook-form.ts";

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

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

Examples

Example 1

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>
  );
}

Type Parameters

optional

TFieldValues extends FieldValues = FieldValues

optional

TFieldArrayName extends FieldArrayPath<TFieldValues> = FieldArrayPath<TFieldValues>

optional

TKeyName extends string = "id"

Parameters

props: UseFieldArrayProps<TFieldValues, TFieldArrayName, TKeyName>

useFieldArray props

Returns

UseFieldArrayReturn<TFieldValues, TFieldArrayName, TKeyName>

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