useFieldArray props
methods - functions to manipulate with the Field Arrays (dynamic inputs) UseFieldArrayReturn
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>
);
}
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