Intento hacer una tabla y crear una fila en cada clic en el botón, para hacer eso, hice 2 estados de uso:

 const [rowsInTable, setRowsInTable] = useState([0]); const [addedRows, setAddedRows] = useState([]);

esta es la función que se ejecuta al hacer clic en el botón -

 const addRowFunc = (e, newRow) => { e.preventDefault(); const add = setRowsInTable([...rowsInTable, newRow]); rowsInTable.map((row, index) => { return setAddedRows([ ...addedRows, <tr key={index}> <td> <input type="file" /> </td> <td> <input type="text" /> </td> <td> <input type="text" /> </td> <td> <input type="text" /> </td> <td> <input type="text" /> </td> <td> <TextareaAutosize minRows={2} /> </td> <td> <input type="date" name="" id="" /> </td> <td> <input type="date" name="" id="" /> </td> <button key={index} onClick={(e) => deleteRow(e, index)} className="deleteButton">X</button> </tr>, ]); }); };

y como puede ver, muestra un botón para cada uno que ejecuta otra función al hacer clic que elimina la fila de la tabla.

esta es la función:

 const deleteRow = (e, index) => { e.preventDefault(); const rowsNum = [rowsInTable] const rowsElements = [addedRows] rowsNum.splice(index, 1) rowsElements.splice(index, 1) setRowsInTable(...rowsNum) setAddedRows(...rowsElements) }

así que 2 cosas... la primera es que cuando trato de eliminar una fila, la fila con el índice en el que hago clic se elimina, pero también elimina todo lo siguiente en la matriz... si hago clic en el índice-5 y tengo 10, 5-10 se borra..

Lo segundo es que quiero que el estado comience limpio o sobrescriba el 0 en la matriz después de la primera interacción. No puedo encontrar una solución para eso, así que apreciaré una.

¡Gracias! :)