reach hook form useFieldArrayについて

※react hook form ver7を使用しています。

useFieldArrayについて

入力ボックスを動的に増やしたり減らしたりするときに使う。
公式

これを知るまでは、入力ボックスを配列としてuseStateで管理して、どうのこうのしていました・・・

googleで検索するとたくさん記事があると思います。
それらを参考にしたとき、useFieldArrayの型で少し苦戦したのでメモ程度に書いておきます。

コード

 import React from "react";
import { useForm, useFieldArray } from "react-hook-form";

//エラーになる型
// type FormValues = {
//   inputs: string[]; // 配列データの型を定義
// };

//エラーにならない型
type FormValues = {
  inputs: { input: string }[]; // 配列データの型を定義
};

export default function FieldArrayExample() {
  const { control, register, handleSubmit } = useForm<FormValues>({
    defaultValues: {
      inputs: [{ input: "" }], // 初期値を設定
    },
  });

  const { fields, append, remove } = useFieldArray({
    control,
    name: "inputs",
  });

  const onSubmit = (data: FormValues) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {fields.map((field, index) => (
        <div key={field.id}>
          <input {...register(`inputs.${index}`)} />
          <button type="button" onClick={() => remove(index)}>
            Remove
          </button>
        </div>
      ))}
      <button type="button" onClick={() => append({ input: "" })}>
        Add
      </button>
      <button type="submit">Submit</button>
    </form>
  );
}

ポイント

useFormで定義するtypeは、オブジェクト配列にする必要がある。
非オブジェクト型の配列だとエラーになる。