Nested Fields with <FormField/>

[ga1az]

I've been thinking for a few hours about how to do the nested fields, or overlaying the and I just can't come up with a clean solution. I want to do something like this nested_fields does anyone have experience doing this that can give me an example pls?

[ga1az]

Solution:

const { control } = form;

  const { fields, append, remove } = useFieldArray({
    name: "options",
    control,
  });
  
{fields.map((field, index) => (
          <div key={field.id} className="flex flex-col gap-5">
            <Separator />
            <FormField
              control={control}
              name={`options.${index}.name`}
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Name</FormLabel>
                  <FormControl>
                    <Input placeholder="Name" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={control}
              name={`options.${index}.overcharge`}
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Overcharge</FormLabel>
                  <FormControl>
                    <Input placeholder="Overcharge" type="number" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <Button type="button" onClick={() => remove(index)}>
              Delete
            </Button>
            <Separator />
          </div>
        ))}
        <Button
          type="button"
          onClick={() => append({ name: "", overcharge: 0 })}
        >
          Add Option
        </Button>