import { useFieldArray } from "https://deno.land/x/netzo@0.5.108/deps/react-hook-form.ts";
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
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 = FieldValuesoptional
TFieldArrayName extends FieldArrayPath<TFieldValues> = FieldArrayPath<TFieldValues>Returns
methods - functions to manipulate with the Field Arrays (dynamic inputs) UseFieldArrayReturn