Cannot delete product item from Firebase - reactjs

Question

I am implementing the Delete function for product item in Firebase by React redux-saga. But I have an issue that the product id to delete has been obtained, but the product has not been removed From Firebase
I do not understand where I am missing
This is my code for product-form
import React, { useState, useEffect } from "react";
import { Form, Container } from "react-bootstrap";
import PropTypes from "prop-types";
import Button from "../../components/Button";
import { CATEGORIES } from "../../constants/categories";
import Loading from "../../components/Loading"
import "../ProductForm/index.css";
const ProductForm = ({
product,
createProductRequest,
fetchProductRequest,
loading,
type }) => {
const [values, setValues] = useState({
image: "",
name: "",
price: 0,
description: "",
categoty: "",
});
const [imageAsFile, setImageAsFile] = useState();
const [isValid, setIsValid] = useState(false);
useEffect(() => {
if (Object.keys(product).length) {
setValues(product);
}
}, [product]);
useEffect(() => {
if (type.CREATE_PRODUCT_SUCCESS) {
fetchProductRequest();
}
}, [fetchProductRequest, type]);
const handleInputChange = (event) => {
// Create new product to update
const newPropdudct = {
...values,
[event.target.name]: event.target.value,
};
// Update new product for value
setValues(newPropdudct);
};
const handleFileChange = (event) => {
const image = event.target.files[0]
setImageAsFile(image)
}
const onHandleSubmit = () => {
if (values.name.trim() === "") {
setIsValid(false);
}
else {
createProductRequest(values, imageAsFile);
}
};
if (loading) {
return (
<Container>
<Loading />
</Container>
);
}
return (
<Container className="product-form">
<Form>
<Form.Group>
<Form.Group>
<Form.File
id="image"
label="Image choose"
value={values.image.name}
onChange={handleFileChange}
/>
</Form.Group>
</Form.Group>
<Form.Group controlId="name">
<Form.Label>Name</Form.Label>
<Form.Control
type="text"
placeholder="Enter product name"
value={values.name}
name="name"
onChange={handleInputChange}
/>
</Form.Group>
<Form.Group controlId="categories">
<Form.Label>Categories</Form.Label>
<Form.Control
as="select"
name="category"
value={values.category}
onChange={handleInputChange}
>
{CATEGORIES.map((category) => (
<option key={category}>{category}</option>
))}
</Form.Control>
</Form.Group>
<Button
btnText="Submit"
size="btn-md"
onClick={onHandleSubmit}
disabled={isValid}
/>
</Form>
</Container>
);
};
export default ProductForm;
This is productAPI which I implement delete from Firebase
import { convertObjectToArray } from "../helpers/product";
import firebaseApp from "./config";
const firebaseDb = firebaseApp.database();
const firebaseStorage = firebaseApp.storage();
/**
* Representation for get list product from firebase
*/
export const onceGetProducts = () =>
firebaseDb
.ref("products")
.once("value")
.then((products) => {
const result = convertObjectToArray(products.val());
return { products: result, status: "ok" };
});
export const deleteProduct = (productId) => {
return firebaseDb.ref('products').child('productId').remove();
}
I already get that Product id, but I cannot delete it from Firebase
I thought I have some missing in productAPI. But I do not know how to resolve it
The button handleDelete function I have imported from another folder. The function implemented by redux-saga.
Anyone have any comment or support for me, I really need your help with this my problem. Thank you so much.

Answer 1

Can you please try the below code
export const deleteProduct = (productId) => {
return firebaseDb.ref('items').child(productId).removeValue();
}