Cannot delete data in database, despite sending just fine

From my front end I am able to post data into my database, using the same method I am unable to delete data from my database however, despite this working with html forms (instead of react) and the same backend.

My app.js:

import './App.css';
import axios from 'axios';
import React, { useState, useEffect } from 'react'

function App() {
  const [Item, setItem] = useState(
    {
      title: '',
      description: '',
      id: ''
    }
  )



  //get user input, and send to mongod db
  function addNew(event) {
    event.preventDefault();
    const newItem = {
      blogTitle: Item.title,
      blogBody: Item.description
    }

    axios.post('http://localhost:3001/api/addNew', newItem);
  }

  function handleChange(event) {
    let {name, value} = event.target;
    setItem(prevInput => {
      return(
        {
          ...prevInput,
          [name]: value,
        }
      );
    });
    // console.log(Item);
  }


  //delete
  function deleteOne(event) {
    event.preventDefault();
    const deleteItem = {
      id: Item.id
    }
    console.log(deleteItem)

    axios.post('http://localhost:3001/api/delete', deleteItem);
  }




  return (
    <div className="App">



      <input onChange={handleChange} name="title"  value={Item.title} placeholder="title"></input>
      <input onChange={handleChange} name="description"  value={Item.description} placeholder="description"></input>

      <button onClick={addNew}>Submit</button>
      <br />

      <input  onChange={handleChange} name='id' value={Item.id}  placeholder='delete id'></input>
      <button onClick={deleteOne} >delete</button>

    </div>
  )}


export default App;

in my server.js:

app.post('/api/addNew', (req, res) => {
  res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
  res.header(
    'Access-Control-Allow-Headers',
    'Origin, X-Requested-With, Content-Type, Accept'
  );
  db.collection('miscData').insertOne(req.body, (err, result) => {
      if (err) console.log(err)
      res.redirect('/');
  })
})

app.delete('/api/delete', (req, res) => {
  res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
  res.header(
    'Access-Control-Allow-Headers',
    'Origin, X-Requested-With, Content-Type, Accept'
  );
  const myquery = { _id: new mongodb.ObjectId(String(req.body.id)) }
  db.collection('miscData').deleteOne(myquery, (err, obj) => {
    if (err) throw err;
    console.log("1 document deleted");
    res.redirect('/');
  })
})

The idea is that I want to type in the id in the input bar and delete it that way. I am able to send the data with addNew but deleteItem does not do anything. Also I will add that for both of these function I am getting in console GET http://localhost:3001/ 404 (Not Found), however addNew still gets items added to the database despite this.

This is what my data looks like if that helps: data image

>Solution :

I think your problems is when you set the deleteItem your calling the Id "blogTitle"

const deleteItem = {
  blogTitle: Item.id
}

Then when you create your query to delete your trying to get "req.body.id" on the server.

const myquery = { _id: new mongodb.ObjectId(String(req.body.id)) }

You need to change one to match the other I think. So that you don’t try to delete undefined. Not sure if you still need to convert to string.

change client code to:

const deleteItem = {
  id: Item.id
}