前回は、ブラウザで Firestore Databese のデータを削除しました。

今回は、ブラウザで Firestore Databese のデータを更新します。

まずは、単一データを取得します。

import { firebaseApp } from "../firebase/firebaseConfig"
import { doc } from "firebase/firestore"

const firestore = firebaseApp.firestore
const docRef = doc(firestore, "Books", "OriihusPZx14s2Equ5fg")

状態管理は、useStateを使用します。

const [book, setBook] = useState([])

簡単なフォームを作成します。

<form>
  <input
    type="text"
    onChange={e => setBook({ ...book, title: e.target.value })}
    value={book.title}
  />
  <input
    type="text"
    onChange={e => setBook({ ...book, author: e.target.value })}
    value={book.author}
  />
  <input
    type="text"
    onChange={e => setBook({ ...book, category: e.target.value })}
    value={book.category}
  />
  <button className="button">更新</button>
</form>

image2

formonSubmitを作成し、handleSubmitを指定します。

<form onSubmit={handleSubmit}>

handleSubmit 関数を作成しましょう。

JavaScript で余計な実行をしないよう、preventDefaultを使用します。

const handleSubmit = e => {
  e.preventDefault()
}

データを更新するには、firebase/firestoreupdateDocを使用します。

updateDocをインポートしましょう。

import { doc, updateDoc } from "firebase/firestore"

updateDocの第一引数に、先程作成したdocRef、第二引数に更新するデータを指定します。

const handleSubmit = e => {
  e.preventDefault()

  updateDoc(docRef, {
    title: book.title,
    author: book.author,
    category: book.category,
  })
}

一通り完成したので、動作確認しましょう。

『風と共に去りぬ』を全てひらがなにしてみます。

image3

更新ボタンをクリックし、Firebase Database を確認すると、

image4

title がひらがなになっていました。

下の画像が、更新前の画像です。

image5

次回は、認証機能を設定するために、Authentication でユーザー登録します。

ブログ一覧