Function UseFieldArray

app/src/useFieldArray.tsx:9–339

()

type FormValues = { data: { name: string }[] };

const UseFieldArray: React.FC = () => {
  const { mode } = useParams();
  const withoutFocus: boolean = mode === 'defaultAndWithoutFocus';
  const {
    control,
    handleSubmit,
    register,
    formState: { isDirty, touchedFields, isValid, dirtyFields, errors },
    reset,
  } = useForm<FormValues>({
    ...(mode === 'default' || withoutFocus
      ? {
          defaultValues: {
            data: [{ name: 'test' }, { name: 'test1' }, { name: 'test2' }],
          },
        }
      : {}),
    mode: mode === 'formState' ? 'onChange' : 'onSubmit',
  });
  const {
    fields,
    append,
    prepend,
    swap,
    move,
    insert,
    remove,
    update,
    replace,
  } = useFieldArray({
    control,
    name: 'data',
  });
  const [data, setData] = React.useState<FormValues>();
  const onSubmit = (data: FormValues) => {
    setData(data);
  };

  React.useEffect(() => {
    setTimeout(() => {
      if (mode === 'asyncReset') {
        reset({
          data: [{ name: 'test' }, { name: 'test1' }, { name: 'test2' }],
        });
      }
    }, 10);
  }, [reset, mode]);

  renderCount++;

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <ul>
        {fields.map((data, index) => (
          <li key={data.id}>
            {index % 2 ? (
              <input
                id={`field${index}`}