How to delete doc in firebase with React application

Question

I have created a small react app that you can type in a title of book and the author name, and it displays the list under below the form, also it stores in firebase database. If you want to delete it you can delete it frontend, however I have trouble with deleting it in my firebase database because I'm not sure how to dynamically refer the doc id. If I provide the id in the code, it's able to delete this particular id, but the user can't provide the id at frontend. Hoping someone help me out, thanks!

import React, {useContext} from 'react'
import {BookContext} from '../contexts/BookContext'
import firebase from '../config/fbConfig'

const BookDetails = ({bookProp}) => {
    const {actionDispatch} = useContext(BookContext)

    const handleOnClick = () => {
        actionDispatch({type: "REMOVE_BOOK", id: bookProp.id})


        firebase.firestore().collection('books').doc(id).delete()
        .then(()=>{console.log("successfully deleted! ")})
        .catch((error)=>{ console.log("Error removing document:", error)})
    }
    return(
        <div>
            {
                <li onClick={handleOnClick}>
                    <div className="title">{bookProp.title}</div>
                    <div className="author">{bookProp.author}</div>
                </li>
            }
        </div>
    )
    }

export default BookDetails

Answer 1

If you have access to the book name and that same name is stored in the book document in a name field, you can use a where query to get the reference to the book document and delete it.

let bookName = "War And Peace";

firebase.firestore().collection("books").where("name", "==", bookName).get()
.then(querySnapshot => {
    querySnapshot.docs[0].ref.delete();
});

querySnapshot.docs[0].ref.delete(); statement gets the first (and likely the only) book that matches the name query and deletes it.

The other way is to get the id and store it when you get the book document like Vaibhav Joshi said.