Completando y eliminando TODOs

¿Cómo completar y eliminar tareas en un TodoList con React?

¡Bienvenidos a un nuevo desafío para evolucionar en el desarrollo de aplicaciones con React! Hoy, te enseñaremos cómo implementar las funcionalidades de completar y eliminar tareas en un TodoList. Con un poco de manipulación de arrays y comprensión de los atributos de evento, te sorprenderás de lo "viva" que puede estar tu aplicación. ¿Listo para comenzar?

¿Cómo completar tareas utilizando eventos en React?

Para permitir que las tareas se completen, es esencial saber en qué momento actualizar el estado de nuestra lista de tareas. Aquí vamos a necesitar un poco de ayuda de nuestro buen amigo setTodos, la función del estado que mantiene viva nuestra lista.

1. Identificar el Evento: Debemos establecer la actualización del estado (setTodos) cuando el usuario interactúa con el elemento específico que indicará que la tarea está completa.

2. Implementar onClick en el ítem: En cada todoItem, dentro del archivo todoItem.js, añadiremos la interacción onClick para que, al hacer clic en el icono de completar (una "V" temporal), se dispare la función de actualización.

3. Definir una nueva función: En vez de pasar directamente setTodos, vamos a encapsular la lógica de completado dentro de una función especial que denominaremos completeTodo.

const completeTodo = (text) => {
  const newTodos = [...todos];
  const todoIndex = newTodos.findIndex(todo => todo.text === text);
  newTodos[todoIndex].completed = true;
  setTodos(newTodos);
};

4. Asignar la función al evento: Dentro de los props del todoItem, encierra completeTodo dentro de una arrow function para retrasar su ejecución hasta que ocurra el evento:

onClick={() => completeTodo(todo.text)}

Este enfoque asegura que la función se ejecute solo en respuesta a eventos reales, evitando errores de redibujo excesivo en React.

¿Cómo eliminar una tarea de la lista?

Eliminar una tarea es tan esencial como completarla. Para lograrlo, seguimos un proceso similar al descrito anteriormente para completar tareas.

1. Añadir un ícono de eliminar: Implementa un segundo span en cada todoItem para representar la acción de eliminación.

2. Crear la función deleteTodo: En paralelo con completeTodo, implementa una función deleteTodo que utilice el método splice para eliminar el ítem del array.

const deleteTodo = (text) => {
  const newTodos = [...todos];
  const todoIndex = newTodos.findIndex(todo => todo.text === text);
  newTodos.splice(todoIndex, 1);
  setTodos(newTodos);
};

3. Asignar la funcionalidad de eliminar: Similar al método de completar, encapsula la llamada a deleteTodo:

onClick={() => deleteTodo(todo.text)}

Este abordaje permite que React gestione el re-renderizado correctamente al eliminar el todo correspondiente.

¿Qué reto opcional puedes intentar?

Para llevar tu aplicación al siguiente nivel, considera implementar una pequeña mejora:

• Mensaje Personalizado en TodoCounter: Modifica el componente TodoCounter para que, cuando se completen todas las tareas, muestre un mensaje especial de felicitaciones.

Este reto no solo pondrá a prueba tus habilidades, sino que proporcionará una mejor experiencia al usuario, añadiendo un toque personal a tu aplicación.

¡Excelente trabajo al llegar hasta aquí! Ahora, tu aplicación TodoList no solo es capaz de contar, buscar y listar tareas, sino también de marcarlas como completadas y eliminarlas. Sigue adelante y verás lo que viene: ¡Trabajar con íconos en React elevará aún más el aspecto visual de tu proyecto!