Setup and Initialize TanStack Form with Dynamic Arrays
Demonstrate how to initialize TanStack Form in a React component and set up a dynamic array field for handling multiple user inputs.
import React from 'react';
import { useFieldArray, useForm } from 'react-hook-form';
Import necessary hooks from react-hook-form for managing forms and dynamic arrays.
function DynamicForm() {
const { register, control, handleSubmit, formState: { errors } } = useForm();
const { fields, append, remove } = useFieldArray({
control,
name: 'users'
});
Initialize the useForm hook for form control and useFieldArray for managing a dynamic array of users.
const onSubmit = data => console.log(data);
return (
<form onSubmit={handleSubmit(onSubmit)}>
{fields.map((field, index) => (
<div key={field.id}>
<input {...register(`users[${index}].name`)} />
<button type='button' onClick={() => remove(index)}>Delete</button>
</div>
))}
<button type='button' onClick={() => append({ name: '' })}>Add User</button>
<input type='submit' />
</form>
);
}
export default DynamicForm;
Defines the form structure. Dynamically generates input fields for each item in the 'users' array. Provides buttons to add a new user field or remove an existing one. Submits the form data to the onSubmit function.