Quiero eliminar esta TODO con o sin usar una clave única
este es el codigo HOOK
const [todos, setTodos] = useState([{}]) const [user, setUser] = useState({ id: uuidv4(), name: '', email: '', phone: '', })Esta es la función para configurar la entrada y eliminar una tarea pendiente
const addTodo = (e) => { e.preventDefault() setTodos([...todos, user]) console.log(addTodo) } console.log(user) const delTodo = (e, id) => { e.preventDefault() console.log(id) todos.splice(id, 1) setTodos([...todos]) }Aquí Estos están siendo mapeados
{todos.map((todo) => ( <div> <li key={todo.id}> {todo.name}, {todo.email}, {todo.phone} </li> <button onClick={delTodo} color='danger'> Delete </button> </div> ))}Esto es lo que obtengo cuando consola.log
Actualice su función delTodo como se muestra a continuación.
splice usa el primer parámetro como start index de la matriz que desea eliminar y el segundo parámetro es deleteCount . Entonces, en su caso, necesita obtener index de su object .
Puede obtener index del object con indexOf() . Devolverá -1 del object que no pertenece a esa matriz. Así que agrega if (index != -1) { } y luego puedes usar todos.splice(index, 1); dentro de eso.
const delTodo = (e, id) => { e.preventDefault(); console.log(id); let index = todos.indexOf(id); if (index != -1) { todos.splice(index, 1); } setTodos([...todos]); }