How to get a cell value from an html table to use in an axios request in reactjs?-CodePudding

I have a HTML table of clients, and I want to be able to delete one of them thanks to a simple axios delete request. In order to do that, I have to get the ID of the client I want to delete. So here is what I did :

  async function deleteClient(e) {
    e.preventDefault();
    const id = document.getElementById("client").innerHTML;

    console.log(id);

    axios
      .delete("http://localhost:8080/api/clients/"   id)
      .then(function (response) {
        console.log(JSON.stringify(response.data));
      })
      .catch(function (error) {
        console.log(error);
      }); 
  }

The deleteClient function is called onClick in the table. The issue is, it only ever gets the ID of the first row client and never the one from rows below. What can I do to get the right ID and be able to delete other clients ?

For info, here is my HTML table, it is filled dynamically thanks to useEffect hook and a simple axios get request :

 <table className="text-white border-2 border-bikeexplogray-light rounded-full">
          <tr>
            <th>Clients</th>
          </tr>
          <tr>
            <th>ID</th>
            <th>Store Name</th>
            <th>Username</th>
            <th>Email</th>
            <th>Phone number</th>
            <th>Address</th>
            <th>Zipcode</th>
            <th>City</th>
            <th>Website</th>
            <th>Delete</th>
          </tr>{" "}
          {filteredData.map((value, index) => {
            return (
              <tr key={value.id}>
                <td id="client">{value.id}</td>
                <td>{value.storeName}</td>
                <td>{value.username}</td>
                <td>{value.email}</td>
                <td>{value.phone}</td>
                <td>{value.adress}</td>
                <td>{value.zipcode}</td>
                <td>{value.city}</td>
                <td>{value.website}</td>
                <td>
                  <button onClick={deleteClient}>Delete</button>
                </td>
              </tr>

Thanks in advance for the help!

CodePudding user response：

The id attribute on the td tag must be unique within the document.

You can use data-id instead, data-* is just a standard way to attach data to the DOM.

In your event handler deleteClient you can use e.currentTarget to access the context.

function deleteClient(e) {
  // this will be your button element
  const button = e.currentTarget
  
  // search up the DOM tree (each parent) for this selector match
  const td = button.closest("tr > td[data-id]")

  // this should be the ID from the data-* attribute
  console.log(td.dataset.id) 

  // ...
}

CodePudding user response：

You can easily get the id of the customer you want to delete because you are in a map() function. Each one of your rows have a unical key that is equal to value.id, so you can modify the button as follows to do the trick :

<button onClick={(e) => deleteClient(e, value.id)}>Delete</button>

And don't forget to modify your deleteClient function :

async function deleteClient(e, id) {


e.preventDefault();
    //const id = document.getElementById("client").innerHTML;

    console.log(id);

    axios
      .delete("http://localhost:8080/api/clients/"   id)
      .then(function (response) {
        console.log(JSON.stringify(response.data));
      })
      .catch(function (error) {
        console.log(error);
      }); 
  }