How to properly use DELETE by ID in Node.js/ReactJS

Question

I would like to explain my problem of the day.

i think it's harder than usual, so let me explain

here i start by getting a get

getRandom = async () => {
const res = await axios.get(
entrypoint + "/alluserpls"
)
this.setState({ data: res.data })
}
componentDidMount() {
this.getRandom()
}

here is my method for delete

handleSubmit = (e) => {
e.preventDefault();
const config = {
  method: "DELETE",
  headers: {
    "Content-Type": "application/json",
  },
};
const url = entrypoint + "/alluserpls";
fetch(url, config)
  .then(res => res.json())
  .then(res => {
    if (res.error) {
      alert(res.error);
    } else {
      alert(`ajouté avec l'ID ${res}!`);
    }
  }).catch(e => {
    console.error(e);
  }).finally(() => this.setState({ redirect: true }));

}

then I map it

 render() {
 let datas = this.state.data.map((datass, index) => {
 return (
     <Col sm="12" key={index}>
     <form onSubmit={this.handleSubmit}>
         <button type="submit">Delete</button>
     </form>
        <div>{datass.name}</div>
     </Col>

then i return the result on my map

return (
  <div>  
    {datas}
   </div>

so works correctly , but the problem is the following when I want to delete only 1 CARD it deletes all my BDD

Here is my routes on BDD

   app.delete('/api/alluserpls', (req, res, ) => {
   const formData = req.body;
   connection.query('DELETE FROM alluserpls SET ?', formData, err => {
   if (err) {
   res.status(500).send("Erreur lors de la modification des users");
   } else {
   res.sendStatus(200);
   }
   });
   });

I would like that when I click on delete it only deletes the card and not all of my database.

How can I fix this issue?

Hemanath · Accepted Answer · 2020-03-16 11:25:28Z

1

Here is one way to do it, assign the id of the user to button id attribute field and then call the delete API with the user id

handleSubmit = (e, id) => {
e.preventDefault();
const userIdData = { id };
const config = {
  method: "DELETE",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify(userIdData), 
};
const url = entrypoint + "/alluserpls";
fetch(url, config)
  .then(res => res.json())
  .then(res => {
    if (res.error) {
      alert(res.error);
    } else {
      alert(`ajouté avec l'ID ${res}!`);
    }
  }).catch(e => {
    console.error(e);
  }).finally(() => this.setState({ redirect: true }));

, in the render method you can pass the id as variable to the handleSubmit function

render() {
 let datas = this.state.data.map((datass, index) => {
 return (
     <Col sm="12" key={index}>
     <form onSubmit={(e) => this.handleSubmit(e, datass.id)}>
         <button type="submit">Delete</button>
     </form>
        <div>{datass.name}</div>
     </Col>

and in the backend you can get the id and delete only the particular user

app.delete('/api/alluserpls', (req, res, ) => {
   const formData = req.body;
   const userId = req.body.id;
   const deleteQuery = `DELETE from alluserpls WHERE id = ${userId}`;
   connection.query(deleteQuery, err => {
     if (err) {
       res.status(500).send("Erreur lors de la modification des users");
      } else {
       res.sendStatus(200);
      }
   });
});

edited Mar 16, 2020 at 11:25

answered Mar 13, 2020 at 14:00

Hemanath

1,0807 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Hemanath Over a year ago

console log the err in connection.query , there might be a problem with the DB query

Neff Over a year ago

code: 'ER_PARSE_ERROR', errno: 1064, sqlMessage: "You have an error in your SQL syntax; check the manual that corresponds to your MariaDB server version for the right syntax to use near '' at line 1", sqlState: '42000', index: 0, sql: 'DELETE from alluserpls WHERE id = ' } DELETE /api/alluserpls 500 15.629 ms - 40

Hemanath Over a year ago

have you added the id attribute to the button? like this <button id={datass.id} type="submit">Delete</button>

Hemanath Over a year ago

I have edited my answer can you check if that works!

Neff Over a year ago

I have a similar question, do you think I can ask it here?

|

Collectives™ on Stack Overflow

How to properly use DELETE by ID in Node.js/ReactJS

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related