0

I can't delete a product by document ID in firestore, need a help about this

<div className="container mx-auto max-w-2xl pt-5">
        {products.map((product: IProduct) => (
          <>
            <Product product={product} currency={currency} key={product.id} />
            <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline mr-2" onClick={(e) => editProduct(e, product)}>Edit</button>
            <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline mb-5" onClick={e => deleteProduct(e, product)}>Delete</button>
          </>
        ))}
      </div>


const deleteProduct = async (e: React.MouseEvent<HTMLButtonElement>, product: IProduct) => {
    e.preventDefault()
    try {
      const snapshot = await getDocs(collection(db, "products"))
      const productRef = doc(db, "products", snapshot.docs[product.id].id)
      await deleteDoc(productRef)
      props.onSubmit()
      toast.error('Product was deleted successfully', {
        position: "top-right",
        autoClose: 2000,
        hideProgressBar: false,
        closeOnClick: true,
        draggable: true,
      })
      getProducts()
    } catch (e) {
      console.error("Error removing document: ", e)
    }
  }

I need to delete a product by button which i click

Andrii Chykulai
  • 3
  • 2
  • How about `deleteProduct(product.id)`? See https://stackoverflow.com/questions/40044861/get-key-index-on-click-es6-react – Frank van Puffelen May 16 '23 at 18:35
  • it's not work because i need to receive document id by clicking on deleteButton and delete this by this document id – Andrii Chykulai May 27 '23 at 10:44
  • That's precisely what `product.id` is, isn't it? You render it into the UI one line above the `onclick` handler. – Frank van Puffelen May 27 '23 at 14:22
  • I need to get the document ID of one of the 20 buttons (because there are 20 products) that I clicked on and immediately delete it according to that document ID. It won't work like that with the product Id, I checked this approximately 100 times and every time i receive some error like product id is `undefined` or something like that. I need to receive document ID(in string) from firestore. – Andrii Chykulai May 27 '23 at 21:01
  • Edit your question to show what you tried when passing `product.id` to `deleteProduct`, and the exact error message and stack trace you get. – Frank van Puffelen May 28 '23 at 03:00
  • I edited the code with `product.id` , but it deletes the wrong product that I clicked on. – Andrii Chykulai May 28 '23 at 08:10
  • So if you `console.log(product.id)` inside `deleteProduct`, it shows a different product ID than the product you clicked on? Can you show that in your question? --- Also: what is this code meant to do `snapshot.docs[product.id].id`? Why can't you just do `deleteDoc(doc(db, "products", product.id))` instead? – Frank van Puffelen May 28 '23 at 16:02
  • when i `console.log(product.id)` it shows exactly product's id i clicked on but this product id is number and this `deleteDoc(doc(db, "products", product.id))` is error cuz' i need a string id from firebase – Andrii Chykulai May 29 '23 at 12:51
  • Ah, so `product.id` is not the same as the document ID? Got it. In that case you will need to [use a query](https://firebase.google.com/docs/firestore/query-data/queries) to find the documents for that `product.id` and then delete those. – Frank van Puffelen May 29 '23 at 15:07

0 Answers0