Function NestedArray

app/src/useFieldArrayNested.tsx:18–119

({
  control,
  index,
}: {
  control: Control<FormValues>;
  index: number;
})

};

function NestedArray({
  control,
  index,
}: {
  control: Control<FormValues>;
  index: number;
}) {
  const { fields, append, prepend, swap, move, remove, insert, update } =
    useFieldArray<FormValues, 'test.0.keyValue'>({
      name: `test.${index}.keyValue` as 'test.0.keyValue',
      control,
    });
  const { touchedFields, dirtyFields } = useFormState({
    control,
  });
  const renderCountRef = React.useRef(0);
  renderCountRef.current++;

  return (
    <div>
      <ul>
        {fields.map((item, i) => (
          <Controller
            key={item.id}
            render={({ field }) => <input {...field} aria-label={'name'} />}
            name={`test.${index}.keyValue.${i}.name`}
            control={control}
          />
        ))}
      </ul>

      <div id={`dirty-nested-${index}`}>{JSON.stringify(dirtyFields)}</div>
      <div id={`touched-nested-${index}`}>{JSON.stringify(touchedFields)}</div>

      <button
        id={`nest-append-${index}`}
        type="button"
        onClick={() => append({ name: 'append' })}
      >
        append
      </button>

      <button
        id={`nest-prepend-${index}`}
        type="button"
        onClick={() => prepend({ name: 'prepend' })}
      >
        prepend
      </button>

      <button
        id={`nest-swap-${index}`}
        onClick={() => swap(1, 2)}
        type="button"
      >
        swap
      </button>