0

I have a MERN app, used Fetch API. I want to delete specific data upon clicking.

I have also given endpoint for delete.

Whenever i am clicking on delete its showing ‘cannot delete.’

and Status is 404: Not Found

Here is my front end code please help me with this

What I have tried:

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

function App() {

  const userArr = [
    {}
  ]

 const [form, setForm] = useState(userArr);
 const [users,setUsers] = useState([]);
 
 const [sid,setId] = useState("");
 const [fname, setFName] = useState("");
 const [pass,setPass] = useState("");




 const handleName = (e) =>{
    setFName(e.target.value);
  
   
 }

 const handlePass = (e) =>{
  setPass(e.target.value);
  console.log("pass is -->"+pass)
 }

 const handleForm = (e) =>{
  setId(Math.random()+1);
  setForm({
    ...form,
    userid: sid,
    username:fname,
    password:pass
  })
 }

 const removeElm = async (userid) =>{
  
  fetch(`http://localhost:9090/demo/users/${userid}`, {
    method: "DELETE",
    headers: {
     'content-Type': 'application/json',
    },
  })
    .then(response => response.text())
    .then((err) => console.log(err))
    .then(() => {
      setUsers(values => {
        return values.filter(item => item.userid !== userid)
      })
})

 }

 const handleSubmit = async (e) =>{
  e.preventDefault();
  const response = await fetch("http://localhost:9090/demo",{
    method:'POST',
    body:JSON.stringify(form),
    headers:{
      'Content-Type':'application/json'
    }
  })

  const data = await response.json();
  console.log(form);
  console.log(response);
  console.log(data);
 }

 const getUsers = async () =>{
  const response = await fetch("http://localhost:9090/demo",{
    method:'GET',
  })

  const data = await response.json();
  setUsers(data);
 }
    
 useEffect(()=>{
  getUsers();
 },[])

  return (
    <div className="App">
     <div>
      <form onSubmit={handleSubmit}>
      <label htmlFor="username">Username</label>
       <input type="text" name='username' onChange={handleName} />
       <label htmlFor="password">Password</label>
       <input type="text" name='password' onChange={handlePass} />
       <button onClick={handleForm}>Submit</button>
      </form>
     </div>
     <ul>
     {users.map(obj=><li key={obj.userid}> <span>Username:{obj.username}</span>, <span>Password:{obj.password}</span>  <button onClick={() => removeElm(obj.userid)}>Remove</button> </li>
   )}
     </ul>
    </div>
  );
}

export default App;

Backend

const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');


// mongo db
main().catch(err => console.log(err));

async function main() {
  await mongoose.connect('mongodb://127.0.0.1:27017/demo');
  console.log('db connected');
}

// schema
const userSchema = new mongoose.Schema({
      userid: Number,
    username: String,
    password: String
  });

// model- class from schema
const UserModel= mongoose.model("User",userSchema);
console.log(UserModel) // to check if the Model has been created successfully or not


const server = express();
// middleware
server.use(cors());
server.use(bodyParser.json());

// API
//CRUD - Create
server.post('/demo',async (req,res)=>{
    let user = new UserModel();
    user.userid  = req.body.userid;
    user.username = req.body.username;
    user.password = req.body.password;
    // save function
    const savedDoc = await user.save();
    console.log(savedDoc);
    res.json(savedDoc);
})

//CRUD - Read
server.get('/demo',async (req,res)=>{
  const docs =  await UserModel.find({});
  console.log("All Docs=>"+docs);
  res.json(docs);
})

//CRUD - Delete
server.delete("/demo/userid", async (req, res) => {
  try{
    const idToDelete = req.params.userid;
    const deletedItem =await UserModel.findByIdAndDelete({"_id":mongoose.Types.ObjectId(idToDelete)});
    return res.status(204).send({message:"Deleted Successfully!"});
    }catch(error){
      throw error;}
  });



server.listen(9090,()=>{
    console.log(`Server is running on port 9090`);
})

Please help me with the above problem