How to Dynamically Add Array of Objects to React Hook Form

Managing dynamic forms in React can be challenging, especially when dealing with an array of objects. In this guide, we'll use React Hook Form (RHF), TypeScript, Zod, and ShadCN UI components to create and validate a dynamic array of objects.

Why Use React Hook Form for Dynamic Forms?

React Hook Form simplifies form management by providing:

Optimized Performance: Avoids unnecessary re-renders.
Easy Validation: Integrates seamlessly with validation libraries like Zod.
Dynamic Field Management: Supports dynamic forms with useFieldArray.

With RHF, creating scalable and maintainable forms is a breeze.

Setting Up the Form Schema

We'll use zod to define a schema for form validation. Here's an example of a schema for a form with dynamic stops:

import * as z from 'zod'

const stopObj = z.object({
  order: z.number(),
  zip: z.string(),
  city: z.string(),
  state: z.string().max(2),
  country: z.string().max(2),
})

const formSchema = z.object({
  firstName: z.string(),
  currency: z.enum(['USD', 'CAD']),
  stops: z.array(stopObj),
})

This schema defines a stops array, where each object contains details like city, state, zip, etc.

Setting Up React Hook Form

Using useForm and useFieldArray, we can manage the state and dynamic behavior of our form.

Component Code

Here's the complete implementation:

import { useForm, useFieldArray } from 'react-hook-form'
import * as z from 'zod'
import { Form, FormField, FormControl, FormLabel, Input } from 'shadcn'

const stopObj = z.object({
  order: z.number(),
  zip: z.string(),
  city: z.string(),
  state: z.string().max(2),
  country: z.string().max(2),
})

const formSchema = z.object({
  firstName: z.string(),
  currency: z.enum(['USD', 'CAD']),
  stops: z.array(stopObj),
})

export default function App() {
  const { control, handleSubmit } = useForm<z.infer<typeof formSchema>>({
    defaultValues: {
      firstName: 'John',
      currency: 'USD',
      stops: [
        { order: 1, city: 'New York', state: 'NY', zip: '02116', country: 'US' },
        { order: 2, city: 'Austin', state: 'TX', zip: '12345', country: 'US' },
      ],
    },
  })

  const { fields, append, remove } = useFieldArray({ control, name: 'stops' })

  const onSubmit = (data: z.infer<typeof formSchema>) => {
    console.log(data)
  }

  return (
    <div className="flex w-full justify-center bg-[#305645]">
      <div className="my-20 w-3/4 rounded-lg bg-white px-5 py-3">
        <Form onSubmit={handleSubmit(onSubmit)}>
          <h1 className="mb-4 text-center text-2xl font-medium">Complete Form</h1>
          <form className="space-y-4">
            <FormField name="firstName" control={control}>
              <FormLabel>First Name</FormLabel>
              <FormControl>
                <Input />
              </FormControl>
            </FormField>
            <FormField name="currency" control={control}>
              <FormLabel>Currency</FormLabel>
              <FormControl>
                <Input />
              </FormControl>
            </FormField>

            {fields.map((field, index) => (
              <div key={field.id} className="flex space-x-4">
                <FormField name={`stops.${index}.city`} control={control}>
                  <FormLabel>City</FormLabel>
                  <FormControl>
                    <Input />
                  </FormControl>
                </FormField>

                <FormField name={`stops.${index}.state`} control={control}>
                  <FormLabel>State</FormLabel>
                  <FormControl>
                    <Input />
                  </FormControl>
                </FormField>

                <button type="button" onClick={() => remove(index)} className="text-red-500">
                  Remove
                </button>
              </div>
            ))}

            <button
              type="button"
              onClick={() =>
                append({ order: fields.length + 1, city: '', state: '', zip: '', country: '' })
              }
              className="rounded bg-blue-500 px-4 py-2 text-white"
            >
              Add Stop
            </button>

            <button type="submit" className="w-full bg-orange-500 font-extrabold">
              Submit
            </button>
          </form>
        </Form>
      </div>
    </div>
  )
}

Adding New Fields

Using the append method from useFieldArray, we can dynamically add new stops to the form. The remove method allows us to delete specific stops.

Best Practices for Dynamic Forms

Validation: Use Zod to ensure each field is correctly validated.
Error Handling: Display clear error messages using RHF's FormMessage.
Dynamic Buttons: Provide options to add or remove fields dynamically.

Example Use Case

Imagine creating a shipment form where users need to input multiple stops. This dynamic setup allows them to:

Add as many stops as required.
Ensure each stop meets validation criteria.
Submit all stops in a single form.

FAQs

How do I initialize default values?

Default values can be set using the defaultValues option in useForm. For example:

defaultValues: {
  stops: [
    { order: 1, city: "New York", state: "NY", zip: "02116", country: "US" },
    { order: 2, city: "Austin", state: "TX", zip: "12345", country: "US" },
  ],
}

Can I nest arrays within objects?

Yes! Zod supports nested schemas, and useFieldArray can manage nested fields efficiently.

How do I handle dynamic validation?

Use Zod's conditional validation to handle complex scenarios based on field values.

Conclusion

Dynamic forms are easier to manage with the right tools. By combining React Hook Form, Zod, and ShadCN, you can create powerful and maintainable forms for any use case. This approach is scalable, type-safe, and perfect for applications requiring dynamic user input.