How to get ID from a input field and DELETE by that ID in ReactJS and Axios

Question

I want to delete a specific object with a DELETE request from Axios:

This is my code to fill and get the object information:

const rowEvents = {
  onClick: (e, row, rowIndex) => {
    this.setState({
      carId: this.state.cars[rowIndex].carId,
      brand: this.state.cars[rowIndex].brand,
      model: this.state.cars[rowIndex].model,
      color: this.state.cars[rowIndex].color,
      topSpeed: this.state.cars[rowIndex].topSpeed
    });
  }
};

When I click on the row I get the data in my input fields:

This is my delete function

handleDelete = carId => {
  axios
    .delete("https://localhost:44369/api/car/DeleteCar/", {
      params: { id: carId }
    })
    .then(response => {
      console.log(response);
    });
};

To get the Id from the field I have a input hidden field like this:

<input type="hidden" id="carId" value={this.state.carId} />;

After the fields are filled I want to delete this object based on the ID I click on the row:

 <button type="submit" className="btn btn-danger mr-1" onClick={this.handleDelete(document.getElementById("carId"))}> Delete record</button>

I get the following error in my console:

TypeError: Converting circular structure to JSON

I have tried to pass the parameter like this {this.state.carId}

Still no succes

Solutions I have tried:

how to delete a single item using axios in react

How to access a DOM element in React? What is the equilvalent of document.getElementById() in React

How to get the value of an input field using ReactJS?

How can I delete the object based on the ID in the input field?

score 3 · Accepted Answer · answered Jul 01 '19 at 12:18

3

You don't have to pass carId as a parameter because you are saving it to the state.

you can access the carId by calling this.state.carId

handleDelete = () => {
  axios
    .delete("https://localhost:44369/api/car/DeleteCar/", {
      params: { id: this.state.carId }
    })
    .then(response => {
      console.log(response);
    });
};

answered Jul 01 '19 at 12:18

sachin mathew

1,432
11
19

What if the OP has number of rows, and each row has delete button? – ravibagul91 Jul 01 '19 at 12:21
if it is inside a map you can do it like data.map(item => { }) – sachin mathew Jul 01 '19 at 12:23
Nice this is working! Thank you so much for your time – Fearcoder Jul 01 '19 at 12:24
from the question it is clear that the carId is stored in a state variable – sachin mathew Jul 01 '19 at 12:25
In this case your code fails, better you edit your answer. – ravibagul91 Jul 01 '19 at 12:25

score 0 · Answer 2 · answered Jul 01 '19 at 12:18

Can you try doing a console.log(document.getElementById("carId"))? I suspect you are getting the whole element, not just the value that you assigned it. I think that changing it to onClick={this.handleDelete(document.getElementById("carId").value)} will fix your problem.

How to get ID from a input field and DELETE by that ID in ReactJS and Axios

2 Answers2