【React】React Hook FormとFirestoreで更新フォームを作る

React Hook Formで登録フォームを作る方法はサンプルがたくさんありますが、更新フォームは少なかったので作ってみました。

import { initializeApp } from "firebase/app";
import { useEffect } from "react";
import { useForm } from "react-hook-form";
import { getFirestore } from "firebase/firestore"
import { doc, getDoc, setDoc } from "firebase/firestore";

const firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_PROJECT_ID,
};

const app = initializeApp(firebaseConfig);
const db = getFirestore();

function App() {
  const { register, handleSubmit, reset, formState: { errors } } = useForm();

  useEffect(async () => {
    const docRef = doc(db, "users", "EVn4r8WB2QskU389OOUt");
    const docSnap = await getDoc(docRef);

    if (docSnap.exists()) {
      reset(docSnap.data());
    } else {
      console.log("No such document!");
    }
  }, []);

  const onSubmit = async (data) => {
    await setDoc(doc(db, "users", "EVn4r8WB2QskU389OOUt"), {
      name: data.name,
      tell: data.tell,
      email: data.email
    }, { merge: true });
  }

  return (
    <div className="App">
      <form onSubmit={handleSubmit(onSubmit)}>
        <div>
          <label htmlFor="">
            名前
            <input {...register("name", { required: true })} />
          </label>
        </div>
        <div>
          <label htmlFor="">
            電話番号
            <input {...register("tell", { required: true })} />
          </label>
        </div>
        <div>
          <label htmlFor="">
            メールアドレス
            <input {...register("email", { required: true })} />
          </label>
        </div>
        <input type="submit" />
      </form>
    </div>
  );
}

export default App;

登録フォームと更新フォームの最大の違いは、登録フォームは各項目は全て空白、未選択で大丈夫ですが更新フォームはDBから値を取得してその値を初期値とする必要がある点です。

useEffectで初回レンダリング時のみFirestoreのusersコレクションからデータを取得し、reset関数の引数にDocumentDataを渡すことでFirestoreから取得したデータでフォームをリセットしています。

IT技術ブログ
↓↓「にほんブログ村」のランキングに参加しています。少しでも面白い、参考になったとか思われたらポチッとしていただけると嬉しいです！

にほんブログ村