Estoy buscando filtrar a través de una matriz y devolver todos los elementos de la matriz, excepto el elemento en el que se ha hecho clic, por lo que tengo un mapa de elementos de la lista, cada uno con una key={index} de su mapa, al hacer onClick debería llamar a mi eliminación y paso el índice del elemento que se eliminará, luego necesito filtrar esa matriz, eliminar el elemento, actualizar el estado y enviar esta información a mi backend.
aquí está la función de borrar
const deleteItem = (id) => { // use filter, to loop through all pieces of index const element = list.todoItems.indexOf(id - 1); setList({ todoItems: list.todoItems.filter(element !== id) }); console.log(list.todoItems); dispatch(updateTodo(list)); };aquí está la matriz mapeada
{list.todoItems.map((Item, index) => ( <div // setup anonymous function, that will call // ONLY when the div // is clicked on. key={index} onClick={() => deleteItem(index)} > {/* list item, gets text from props */} <li>{Item}</li> </div> ))}Debo estar perdiendo algo, porque esto debería funcionar, aunque es posible que tenga que cambiar de marcha y tener cada elemento como un objeto real en mi base de datos, aunque prefiero no hacerlo porque siento que una serie de cadenas es más que apropiada para esta aplicación .
Elimine su lógica indexOf y esto funcionará.
No tiene que encontrar el índice de la matriz porque ya lo está recibiendo como parámetro.
const deleteItem = (id) => { setList({ todoItems: list.todoItems.filter((_, filterID) => filterID !== id) }); console.log(list.todoItems); dispatch(updateTodo(list)); };No necesita restar uno del índice en la función indexOf
Y para este caso, el empalme funciona mejor que el filtro.
const deleteItem = (id) => { const element = list.todoItems.indexOf(id); setList({ todoItems: {...list}.todoItems.splice(element, 1)}); dispatch(updateTodo(list)); };