Click here to Skip to main content
15,850,214 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I have a MERN app, used Fetch API. I want to delete specific data upon clicking.

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 = (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._id)}>Remove</button> </li>
   )}
     </ul>
    </div>
  );
}

export default App;
Posted
Updated 14-Jul-23 1:07am

1 solution

The problem lies within your 'removeElm' function when you try to laod 'userid - the path to 'demo/users is not found and thus no 'userid' is returned.

Some steps to try and find the reason why the file is not found -
1) Make sure your localhost server is up and running on http://localhost:9090. You can try accessing http://localhost:9090/demo/users directly in your browser or using a tool like Postman to verify if the endpoint exists and is reachable - Postman can be found at - Postman[^]

2) Confirm that '/demo/users' exists on your server and that it supports the 'DELETE' method.

3) Ensure that your 'userid' parameter being passed to your 'removeElm' function is valid and corresponds to an actual existing user ID.

4) Instead of logging the error message in the '.then((err) => console.log(err))' block, you can log the entire response object using 'console.log(response)' or 'console.log(response.status, response.statusText)'. This will give you a more detailed message about the server response, including the HTTP status code and any error messages.

5) Open your network tab in your browser's developer tools (F12) and check if the request has been sent when calling 'removeElm'
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900