Este es un complemento a mi pregunta anterior; Estoy tratando de eliminar una fila específica cuando se hace clic en el botón, sin embargo, cada vez que se hace clic en el botón, se elimina la siguiente fila de la tabla en lugar de sí mismo. Esto es lo que parece con un video . El código actual que estoy usando para realizar esta acción es:
const [shop, setShop] = useState([]); const singleDelete = (d) => { const newArr = [...shop]; const index = shop.findIndex((contact) => contact.id === d); newArr.splice(index, 1); setShop(newArr); } return ( <div className="content"> <Table> <tbody id="tbid"> {(shop.map((s,i) => ( <tr key={`${s+i}`} id={i} value={`${i}Row`}> <td>{i}</td> <td>{profil[i]}</td> <td>{s}</td> <td></td> <td>{acc[i]}</td> <td> <Button className="btn-round btn-icon" color="danger" size="sm" type="submit" onClick={singleDelete}> <i className="icon-simple-delete"/> </Button> </td> </tr> )))} </tbody> </Table> <div> ) He intentado usar setShop(shop.filter((_, index) => index !== d)); Pero los resultados siguen siendo los mismos.
El problema es que no pasa la ID a la función singleDelete .
Cambia esto:
onClick={singleDelete}
a esto:
onClick={ () => singleDelete(s.id) }
Y sería bueno reescribir la función singleDelete como recomendó singleDelete .
Tal vez intente usar el filtro en su lugar:
const singleDelete = (d) => { setShop(shop.filter((contact) => contact.id !== d)); }