react-hook-form-canva-team-invite-form-clone.tsx

'use client';

import { Controller, useFieldArray, useForm } from 'react-hook-form';

export default function Job() {
  const { control } = useForm({
    defaultValues: {
      emails: [
        {
          value: '',
        },
      ],
    },
  });
  const { fields, append, remove } = useFieldArray({
    control,
    name: 'emails',
  });

  return (
    <div className="space-y-4 flex flex-col">
      {fields.map((field, i) => {
        return (
          <Controller
            key={field.id}
            control={control}
            name={`emails.${i}.value`}
            render={({ field: { onChange, onBlur, value } }) => (
              <input
                className="p-4"
                onChange={(e) => {
                  if (e.target.value === '' && i !== 0) {
                    remove(i);
                  }

                  if (e.target.value.length > 0 && i === fields.length - 1) {
                    append({ value: '' });
                  }

                  onChange(e);
                }}
                value={value}
              />
            )}
          />
        );
      })}
    </div>
  );
}