Firebase with React - unable to delete items from the database - reactjs

Question

Below is my App.js component-
import { useEffect, useState } from 'react'
import Cart from './Cart'
import Navbar from './Navbar'
import firebase from './firebase'
function App() {
const [products, setProducts] = useState([])
useEffect(()=>{
const ref = firebase.firestore().collection('products');
ref.onSnapshot((snapshot) => {
const items = [];
snapshot.forEach((doc) =>{
const data = doc.data();
items.push(data)
data['id'] = doc.id
})
setProducts(items);
})
},[]);
const handleIncreaseQuantity = (product) =>{
const index = products.indexOf(product)
products[index].qty += 1;
setProducts([...products])
}
const handleDecreaseQuantity = (product) =>{
const index = products.indexOf(product)
if(products[index].qty > 0){
products[index].qty -= 1;
setProducts([...products])
}
}
const handleDeleteQuantity = (product) =>{
// const productId = product.id
// const newProducts = products.filter((item) => (item.id !== productId))
// setProducts([...newProducts])
// console.log(newProducts)
// console.log(product.prototype)
firebase.firestore().collection('products').doc(product.id).remove()
console.log(`product id: ${product.id}`)
}
const getCartCount = () =>{
var count = 0;
products.forEach((item) => (
count += item.qty
))
return count;
}
const getCartTotal = () =>{
var count = 0;
products.map((product) =>(
count += product.qty*product.price
))
return count;
}
return (
<div className="App">
<Navbar count = {getCartCount()}/>
<Cart
products = {products}
onIncreaseQty = {handleIncreaseQuantity}
onDecreaseQty = {handleDecreaseQuantity}
onDeleteQty = {handleDeleteQuantity}
/>
<div className="cart-total">
TOTAL: {getCartTotal()}
</div>
</div>
);
}
export default App;
I want my app to function in a way that whenever I click the delete icon(see the image at the last), the item is deleted from the database. I just don't know how to do it. I am using .remove() (see handleDeleteQuantity() function) but it's throwing an error that .remove is not a function. Or maybe I don't know exactly what code goes in handleDeleteQuantity() to remove the item.

Answer 1

The .remove() method is used to delete data from realtime database. Firestore's documentation says, "To delete a document, use the delete() method." Also try awaiting that method in an async function or just handle the promise using .then and .catch.
const handleDeleteQuantity = (product) => {
firebase.firestore().collection('products').doc(product.id).delete().then(() => {
console.log(`product id: ${product.id}`)
}).catch((e) => console.log(e))
}
Deleting a document does not delete its subcollections!