Aplicación de tareas con React: grupos para tareas completadas

Organizar los To-dos es una habilidad fundamental para la gestión de tareas, tanto en la vida diaria como en el desarrollo de software. En este tutorial aprenderás cómo crear una aplicación de React que agrupa los To-dos en dos categorías: pendientes y completados. Esto te permitirá tener una visión clara de tus To-dos y te ayudará a gestionar eficazmente las tareas completadas.

Principales conclusiones

• Filtrar y agrupar To-dos en React es un método sencillo pero efectivo para la gestión de tareas.
• Es importante asignar un ID único a cada To-do para evitar problemas de identificación.
• Dividir las listas permite mejorar la experiencia del usuario al separar claramente las tareas pasadas de las actuales.

Paso 1: Estructura de los componentes

Lo primero que debes hacer es asegurarte de tener la estructura básica de tu lista de To-dos en un componente de React. La idea es agrupar los To-dos en dos secciones diferentes. Comenzarás con los To-dos pendientes, seguido por los completados.

Para lograr esto, puedes utilizar dos funciones map separadas dentro de tu componente. Esto te permitirá dividir los To-dos en la interfaz de usuario.

Paso 2: Filtrar los To-dos

El filtrado de To-dos se realiza a través del método filter. Especificas que solo deseas tener To-dos con el estado "pendiente". Esto se logra revisando si la propiedad done es false en la llamada al filter.

Debes aplicar la misma técnica para los To-dos completados. Aquí indicas que solo deseas los To-dos donde done es true.

Paso 3: Identificar los To-dos con IDs únicos

Un error común es usar el índice del array como clave para los To-dos. Esto no es recomendable, ya que los índices pueden cambiar al filtrar el array. En cambio, asegúrate de que cada To-do tenga un ID único.

Cuando creas un nuevo To-do, utiliza un método para generar un ID único, como por ejemplo Date.now() o una combinación de marca de tiempo y un número aleatorio.

Paso 4: Cambiar el estado de los To-dos

Para cambiar el estado de un To-do, es decir, de "pendiente" a "completado", debes actualizar los controladores de eventos onChange. Asegúrate de usar el ID en lugar del índice para identificar los To-dos.

Prueba la aplicación para asegurarte de que el cambio de estado de los To-dos funcione. Deberías poder mover To-dos de la lista superior a la inferior y viceversa.

Paso 5: Limpieza del código

Debes prestar especial atención a este paso. Asegúrate de que tu código no contenga referencias innecesarias a índices. Al volver a IDs únicos, no solo se vuelve el código más limpio, sino que también se vuelve más estable el comportamiento de tu aplicación.

Resumen

En este tutorial has aprendido cómo crear una aplicación de To-do en React que te permite agrupar y gestionar efectivamente las tareas. La división en "pendientes" y "completados" ayuda en la vista de tareas y proporciona una mejor experiencia para el usuario. Evita usar índices como claves para evitar problemas de identificación de To-dos.