Function WatchUseFieldArray

app/src/watchUseFieldArray.tsx:11–114

()

};

const WatchUseFieldArray: React.FC = () => {
  const { mode } = useParams();
  const { control, handleSubmit, reset, watch, register } = useForm<FormInputs>(
    {
      ...(mode === 'default'
        ? {
            defaultValues: {
              data: [{ name: 'test' }, { name: 'test1' }, { name: 'test2' }],
            },
          }
        : {}),
      mode: mode === 'formState' ? 'onChange' : 'onSubmit',
    },
  );
  const { fields, append, prepend, swap, move, insert, remove, update } =
    useFieldArray({
      control,
      name: 'data',
    });
  const onSubmit = () => {};
  const watchAll = watch('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}>
            <input
              id={`field${index}`}
              data-order={index}
              {...register(`data.${index}.name` as const)}
            />
            <button id={`delete${index}`} onClick={() => remove(index)}>
              Delete
            </button>
          </li>
        ))}
      </ul>

      <button
        id="append"
        type="button"
        onClick={() => append({ name: renderCount.toString() })}
      >
        append
      </button>