Tengo una tabla HTML de clientes y quiero poder eliminar uno de ellos gracias a una simple solicitud de eliminación de axios. Para hacer eso, tengo que obtener la ID del cliente que quiero eliminar. Así que esto es lo que hice:
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); }); }La función deleteClient se llama onClick en la tabla. El problema es que solo obtiene el ID del cliente de la primera fila y nunca el de las filas inferiores. ¿Qué puedo hacer para obtener la identificación correcta y poder eliminar otros clientes?
Para obtener información, aquí está mi tabla HTML, se llena dinámicamente gracias al gancho useEffect y una simple solicitud de obtención de axios:
<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>¡Gracias de antemano por la ayuda!
El atributo id en la etiqueta td debe ser único dentro del documento.
Puede usar data-id en su lugar, data-* es solo una forma estándar de adjuntar datos al DOM.
En su controlador de eventos deleteClient puede usar e.currentTarget para acceder al contexto.
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) // ... }Puede obtener fácilmente la identificación del cliente que desea eliminar porque se encuentra en una función map() . Cada una de sus filas tiene una key única que es igual a value.id , por lo que puede modificar el botón de la siguiente manera para hacer el truco:
<button onClick={(e) => deleteClient(e, value.id)}>Delete</button> Y no olvides modificar tu función deleteClient :
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); }); }