Stack Exchange
DELETE DATA React express.js
Routes : users.js file :
const express = require("express");
const { getUser, deleteForm } = require("../controller/user.js");

const router = express.Router();

router.get("/find/:username", getUser);
router.delete("/:formId", deleteForm)

module.exports = router;

controller : user.js file :
const { db } = require("../connect.js");


exports.getUser = function(req, res) {
  const username = req.params.username;
  const q = "SELECT * FROM  users WHERE username=?";

  db.query(q, [username], function(err, data) {
    if (err) return res.status(500).json(err);
    const { password, ...info } = data[0];
    return res.json(info);
    
  });
  console.log(username)
};


exports.deleteForm = function(req, res) {
  const formId = req.params.formId
  const q = "DELETE FROM form WHERE id = ?";
  db.query(q, [formId], function (err, result) {
    if (err) {
      return res.status(500).json(err);

    }
    if (result.affectedRows === 0) {
      return res.status(404).json({message:"Form not found"})
    }
    return res.json({message: "Form deleted successfully"})
  })

}

Admin.jsx file :
import React from 'react';
import Dashboard from '../../Components/Dashboard/Dashboard';
import Logout from '../../Components/Logout/Logout';



const Admin = ({formId}) => {
  function deleteForm(e, formId) {
    e.preventDefault();
    console.log(formId)
    fetch(`http://localhost:5000/backend/users/${formId}`, {
        method: "DELETE"
    })
    .then((result) => result.json())
    .then((resp) => {
      console.warn(resp);
      if (resp.message === "Form deleted successfully") 
        
        localStorage.clear();
       
      
    })
    .catch((error) => {
      console.error(error);
    });
}
  
  return (
    <div>
      <Logout/>
      <Dashboard/>
      <button onClick={(e) => deleteForm(e, formId)} className="delete-button">
        Delete FORM
      </button>
      
    </div>
  )
}

export default Admin;


Im trying to make the admin delete the form instead of getting the form deleted i got this error from the browser : http://localhost:5000/backend/users/undefined 404 (Not Found)
{message: 'Form not found'}
can anyone help me to make this function work .....and im passing the formid value as prop is it correct or no

Then formId is undefined.  Which means form.id is undefined.  What value do you expect it to have and why?  Where in the code shown do you provide that value?

exports.deleteForm = function(req, res) {
const formId = req.params.formId
const q = "DELETE FROM form WHERE id = ?";
db.query(q, [formId], function (err, result) {
if (err) {
return res.status(500).json(err);
}
if (result.affectedRows === 0) {
  return res.status(404).json({message:"Form not found"})
}
return res.json({message: "Form deleted successfully"})

})
} from the backend function

No, that's now where you supply the value to produce the URL.  The problem is happening when constructing the URL to make the request to the back-end.  So clearly the problem happens on the front-end.  Where do you use this DeleteForm component in React, and what id value do you pass to its props?

admin component : import React from 'react';
import Dashboard from '../../Components/Dashboard/Dashboard';
import Logout from '../../Components/Logout/Logout';
import { DeleteForm } from '../../Components/DeleteForm';
const Admin = () => {
return (




</div>

)
}
export default Admin; .......( and what id value do you pass to its props?) for that im passing form as a props from the DeleteForm component ........to be more clear my problem is with the url and id value ?

Relevant code belongs in the question, not in comments where it is barely readable.  And according to that code you are not passing any id prop to <DeleteForm/>, which is why the id prop value in DeleteForm is undefined.

i've updated my code and i don't know if im passing the id value as prop is correct or not

Well, the updated code is no longer using a <DeleteForm> component.  So if you're asking whether or not you are correctly passing props to your <DeleteForm> component then I guess the answer would be "No", because you can't pass props to a component that you're not using in the first place.  If your intent with the updated code was to refactor/rewrite the functionality entirely then you are encouraged to test and debug your new code.  When you do that, do you observe a specific problem?  What problem do you observe and what debugging information have you observed?

i tried to log the formId before the fetch and it's undefined

What value do you expect formId to have and why?  The Admin component is passing formId to the function deleteForm, and the Admin component gets that value from its props.  But nowhere in the code shown are you actually using <Admin> as a component or passing any props to it.  Where do you use this component and what value are you passing for its formId prop?  So far you're just going in circles without ever tracing back to where this value comes from and what you expect it to be or why.

.app.js file :  <Route
path="/admin"
element={}
/>.........first the admin page im using it to display the dashboard where the admin has a data grid with the form id... name and other data ............i fethed those data in the dashboard component and it works well  and i think the delete function is a good option for my client so he can delete the form if he want ....the best option to delete the form is by Id i believe .....so if you can show me how to pass a value to formId

Continuing the same circle... Relevant code belongs in the question, not in comments where it is barely readable. As for the code in that comment, nowhere do you pass a prop to Admin.  Perhaps you meant to do something like this?: <Route path="/admin" element={<ProtectedRoute element={<Admin formId={someValue} />} />  I don't know what value you're looking to use for the formId, all I know is that nowhere in your code are you using any value for it. Whatever value you want to use, wherever that value comes from, that's where you would get it. But the code shown has no such information.

Make sure you are passing the formId as props to the Admin component. Check your parent component where you are using the Admin component.
It needs to look like:
<Admin formId={20} />

And request URL needs to look like http://localhost:5000/backend/users/20

Thank you .. I've fixed that by taking the value from the row in dashboard and it works fine for the delete and the update status
