En mi tabla, cuando se ingresa un valor, se almacena en el almacenamiento local como una matriz 2D y se asigna a una tabla en una nueva fila separada. Cuando se crea una nueva fila, también tiene su propio botón de eliminación. Cuando se hace clic en ese botón Eliminar, se eliminará esa fila específica con el botón.
un ejemplo es [['hello', 'hi', 'hey'], ['bye', 'goodbye', 'cya']] ; la primera matriz anidada tendría los 3 datos que contiene asignados en una fila y la segunda matriz anidada en la fila siguiente. Si quisiera eliminar la primera fila, haría clic en el botón Eliminar, lo que daría como resultado que se elimine la primera matriz anidada y que se elimine la primera fila.
Dado que la tabla se basa en el almacenamiento local, tendré que eliminar esa matriz específica pero conservar las demás. Creo que puedo lograr esto obteniendo ese índice de matrices anidadas y eliminándolo. Ahora no estoy seguro de si necesito usar .splice() u otro método. Este es el método que he usado que no ha funcionado:
const getData = [JSON.parse(localStorage.getItem('pls'))]; const tableDatas = [...getData]; const handleSingleDelete = (index) => { //what do I place here? I tried this: getItem.splice(index, 1) } ... return( <Table className="tablesorter" responsive id="maintb"> <tbody id="tbid"> {(tableDatas.map((l,i) => ( <tr key={`${l+i}`} id={`${i}`}> <td>{tableDatas[i][1]}</td> <td>{tableDatas[i][2]}</td> <td>{tableDatas[i][3]}</td> <td> <Button onClick={handleSingleDelete}>Delete </Button> </td> </tr> </tbody> <Table> )Debe obtener el Array del localStorage cada vez que desee realizar un cambio en él, porque siempre necesita los datos más recientes, llamarlo primero siempre tendrá el mismo conjunto y cualquier cambio futuro en el localstorage no se actualizará en el variable hasta que lo llame de nuevo.
Primero introdúzcalo en la función, luego elimine el índice que desea y vuelva a analizarlo para guardarlo en el localstorage :
EDITAR: para representar los datos, se puede usar useState y actualizarlo cada vez que se elimine.
const localStorageName = "pls"; const [arrData, setArrData] = useState(JSON.parse(localStorage.getItem(localStorageName))) const handleSingleDelete = (index) => { const currentArray = JSON.parse(localStorage.getItem(localStorageName)); currentArray.splice(index, 1); localStorage.setItem(localStorageName, JSON.stringify(currentArray)) setArrData(() => currentArray) } Ahora use este arrData para hacer un bucle en el componente y representar siempre los datos más actualizados.
Gracias a woohaik y alguna modificación obtuve los resultados haciendo esto:
const localStorageName = 'pls'; const [arrData, setArrData] = useState(JSON.parse(localStorage.getItem(localStorageName))) function handleSingleDelete(e,i){ //gets array from localstorage //Splices it via index of specific row //sets modified array as new array and deletes it from rendered view. const currentArray = JSON.parse(localStorage.getItem(localStorageName)); currentArray.splice(i, 1); localStorage.setItem(localStorageName, JSON.stringify(currentArray)) setArrData(() => currentArray) } ... return( {(tableDatas.map((l,i) => ( <tr key={`${l+i}`} id={`${i}`}> {/*<td>{i}</td>*/} <td>{tableDatas[i][2]}</td> <td>{tableDatas[i][0]}</td> <td>{tableDatas[i][3]}</td> <td>{tableDatas[i][1]}</td> <td>Idle</td> <td> <Button onClick={e => handleSingleDelete(e, i)}>Delete </Button> </td> </tr> ... );