前々回は、ブラウザで送信したデータを、Firestore Databese に保存しました。

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

BooksGet.js の一覧に、削除ボタンを作成します。

削除するデータを指定するために、idを指定しましょう。

<button onClick={() => handleClick(book.id)}>削除</button>

image2

次に、handleClickを作成し、その中で削除するためのコードを書いていきます。

handleClickは、非同期にします。

const handleClick = async id => {}

firebaseConfigから、firebaseAppをインポートします。

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

firebaseAppfirestoreを使用しましょう。

const handleClick = async id => {
  const firestore = firebaseApp.firestore
}

firebase/firestoreからdocdeleteDocをインポートします。

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

docで、どのデータを削除するのかを指定します。

docの第一引数にfirestore、第二引数にコレクション名であるBooks、第三引数にidを指定します。

const handleClick = async id => {
  const firestore = firebaseApp.firestore

  const docRef = doc(firestore, "Books", id)
}

deleteDocで削除を実行します。

非同期にしたいので、awaitを使用します。

const handleClick = async id => {
  const firestore = firebaseApp.firestore

  const docRef = doc(firestore, "Books", id)

  await deleteDoc(docRef)
}

一通り完成したので、削除してみます。

image3

『うまくいっている人の考え方』の削除ボタンをクリックすると、

image4

『うまくいっている人の考え方』を削除することができました。

Firestore Database を確認してみましょう。

image5

4 件あったデータが、1 件削除されていました。

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

ブログ一覧