React Hook Formでデフォルト値を設定する方法

はじめに

React Hook Formを使用して、登録されているレコードの値があればモーダルのフォームに値を埋めた状態で、表示したかったのですが、結構実装に時間がかかったのでやり方を残しておきたいと思います。

実現したいこと

存在するレコードであれば、編集ボタンを押したら、モーダルが開き、保存されている値を表示する。

詰まったところ

クリックしたら、そのレコード情報を表示したかったが、前にクリックしたレコードの情報が残り続けて、更新されなかった。

実現方法

赤丸の編集ボタンをクリックします。
その際に、recordの情報（青で囲った部分）を渡します。
propsでrecord(編集をクリックした際に、渡されたレコード情報)を受け取ります。
valueでtitleを設定し、編集ボタンがクリックされた際に渡されたrecordの情報をuseEffectで更新します。

この際に、注意してほしいのが、useEffectでresetとsetTitleを設定して、値を更新することです。
更新しないと前の値のキャッシュが残っていて、値が正常に更新されません。

reset({
  title: record.title,
  time: record.time,
});

• 以下は全体のコード

const { record } = props;
const [title, setTitle] = useState<string>("");

useEffect(() => {
  if (record) {
    reset({
      title: record.title,
    });
    setTitle(record.title);
  }
}, [reset, record]);

return(
  <FormControl isInvalid={!!errors.title}>
    <FormLabel>タイトル</FormLabel>
    <Input 
      value={title}
      {...register("title", {
        required: "内容の入力は必須です",
        onChange: (event) => {
          setTitle(event.target.value) 
        }
      })} />
  </FormControl>
)

終わりに

結構悩んだところなので、忘れずに押さえておきたいです。

参考