I am having trouble to delete individual document from my firebase firestore database

Question

I created a react app which lists book titles and author names. The data stores in firebase firestore database and it sync with the application at frontend. The problem I am having is that to delete individual document from the collection. I'm able to access the id but unable to single out particular id to delete. I put the code below and hoping somebody can helping me out to show how I should delete individual document, at the moment it deletes all the documents. Thanks!

import React, {useState, useEffect} from 'react'
import firebase from '../config/fbConfig'


const useBooks = () => {
    const [books, setBooks] = useState([])
     useEffect(() => {
        firebase.firestore().collection('books').onSnapshot((snapshot) => {
            const newBooks =  snapshot.docs.map(doc => ({
                 id: doc.id,
                ...doc.data()
              }))
            setBooks(newBooks)
        })
    },[])
    return books
}

const handleOnClick = () => { 
    const db = firebase.firestore()
    db.collection('books').get().then(snapshot => {
        snapshot.docs.forEach(doc => {
            const id = doc.id
            db.collection('books').doc(id).delete() 
            console.log("Jampa thinlay Book ID:", id)
        }) 

    })     
}

const BookList = () => {
    const books = useBooks()
    console.log('jt books', books)
    return(
        <div className="book_list">
            <ul>
                {
                    books.map(book => 
                         <li key={book.id} onClick={()=> handleOnClick()} >
                            <div className="title">id:{book.id}</div>
                            <div className="cross" > X </div>
                            <div className="title">book:{book.title.title}</div>
                            <div className="author">author: {book.author.author}</div>
                         </li>      
                    )
                } 
            </ul>
        </div>
    )
}
export default BookList

Answer 1

the problem is that in your function

const handleOnClick = () => { 
    const db = firebase.firestore()
    db.collection('books').get().then(snapshot => {
        snapshot.docs.forEach(doc => {
            const id = doc.id
            db.collection('books').doc(id).delete() 
            console.log("Jampa thinlay Book ID:", id)
        }) 

    })     
}

you are looping all the documents, and are calling delete on each of them, which then your issue happens.

a solution to this would be to change the signature of your handleOnClick function to recieve the id of the item to be deleted, like so

const handleOnClick = (documentId) => { 
    const db = firebase.firestore();

    db.collection("books").doc(documentId).delete()
           .then(() => {
             console.log("item with id" + documentId + "got deleted");
            }).catch((e) => console.log(e));   
}

the difference of the new function is that it receive the id of the document you want to delete, and deletes only that document,

and in your html you can pass the id of each book as follows

const BookList = () => {
    const books = useBooks()
    console.log('jt books', books)
    return(
        <div className="book_list">
            <ul>
                {
                    books.map(book => 
                         <li key={book.id} onClick={()=> handleOnClick(book.id)} > // <-----------------
                            <div className="title">id:{book.id}</div>
                            <div className="cross" > X </div>
                            <div className="title">book:{book.title.title}</div>
                            <div className="author">author: {book.author.author}</div>
                         </li>      
                    )
                } 
            </ul>
        </div>
    )
}