Tengo un componente con una tabla que se carga con los datos que envia la API REST, mi duda mas que nada, es si es bueno borrar una fila con remove() o deleteRow(index) entrando al DOM o tengo que manipular el DOM a través de un estado (useState) para una buena práctica o algo así.
Información adicional: me he acostumbrado a manipular el DOM directamente con javascript puro al crear páginas web estáticas, pero en React creo que tienes que usar accesorios, estado, ganchos para manipular los elementos del DOM o ¿me equivoco? Debe haber casos, supongo.
ATRAVESANDO DOM
export default function App() { const data = ['Eli','Smith', 'Jhon'] const handleDelete = (index,e) => { //I can save an ID in <tr> through datasets (data-) //to get it by traversing the DOM when the user clicks and delete it //also in my database (API), that's Ok? e.target.parentNode.parentNode.parentNode.deleteRow(index) } const rows = data.map((item, index) => { return ( <tr key={index}> <td>{item}</td> <td><button onClick={e => handleDelete(index,e)}>Delete</button></td> </tr> ) }) return ( <div className="App"> <h1>Hello CodeSandbox</h1> <table> {rows} </table> </div> ); }Está bien ?
¿O tengo que poner las filas en un estado (useState) y actualizarlo eliminando y volviendo a renderizar?
La mejor práctica es administrar datos a través del estado, sugeriría no hacer la manipulación DOM manualmente
export default function App() { const [data, setData] = useState(['Eli','Smith', 'Jhon']); const handleDelete = (index,e) => { setData(data.filter((v, i) => i !== index)); } const rows = data.map((item, index) => { return ( <tr key={index}> <td>{item}</td> <td><button onClick={e => handleDelete(index,e)}>Delete</button></td> </tr> ) }) return ( <div className="App"> <h1>Hello CodeSandbox</h1> <table> {rows} </table> </div> ); }use hook useState para guardar sus datos y luego con handlerDelete elimine el elemento y configure los datos. React volverá a renderizar el componente (porque su estado ha cambiado) y obtendrá el resultado necesario: