How to delete data from server and UI using React and Node?

user_18387741 0
Viewed 58

I want to delete data from UI and Server, I write this code, but the problem is when I click the Delete button data was deleted from UI but still exists in the server. After reloading the page deleted data showed in the UI again. when I console.log(data) the result is { acknowledged: true, deletedCount: 0 }.

/* server side code */

app.delete('/data/:id', async (req, res) => {
        const id = req.params.id
        const query = { _id: ObjectId(id) }
        const result = await dataCollection.deleteOne(query)
        res.send(result)
    })



/* client side code */

const [data, setData] = useData()

 const deleteData = async (id) => {

        const confirmation = window.confirm('Are you sure about delete the data ?')

        if (confirmation) {
            const { data } = await axios.delete(`http://localhost:5000/data/${id}`, product)
            const exist = data.filter( x => x._id !== id);
            setData(exist)
        })

    }

The result { acknowledged: true, deletedCount: 0 }
Expected result { acknowledged: true, deletedCount: 1 }

reactjs mongodb-query node.js mongodb
1 Answers

There is some problem with your other code, you have used a custom hook as useData . Your server response indicates that data is deleted from server, try to fetch data again from server and update the ui content with that new data. I am leaving a working version demo below:

function SingleProductMng({ item, products, setProducts }) { // here props are drilled in parent container
// here item is the single item to render
// products and setProducts is custom useState hook to render data from server
const { _id, name, supplier, price, quantity, category } = item;

const handleDelete = () => {
    if (window.confirm('Are you sure you want to delete?')) {
        console.log('deleted');
        fetch(`your server url`, {
            method: 'DELETE',
            headers: {
                'content-type': 'application/json',
            },
            body: JSON.stringify(item),
        });

        const filteredItem = products.filter((product) => product._id !== _id);
        setProducts(filteredItem);
    } else {
        console.log('cancel');
    }
};
        return (<>components</>)
user_157525010
Related