Contando TODOs

Crear interactividad y cohesión entre componentes es una habilidad esencial en el desarrollo moderno con ReactJS, una biblioteca de JavaScript para construir interfaces de usuario. Esto incluye desde manipular el estado de los componentes hasta hacer que estos se comuniquen efectivamente. En esta exploración, descubriremos cómo se pueden vincular componentes padres e hijos en React, así como la generación de estados derivados que permiten crear cálculos dinámicos y precisos basados en estados previos, utilizando como ejemplo practico la implementación de un contador en una aplicación de tareas o "todos".

¿Cómo pueden comunicarse estados entre componentes padres e hijos en React?

Para lograr la comunicación de estados en React, se debe tomar en cuenta que no es posible compartir estados directamente de un componente hijo a un componente padre. Lo que sí es posible es realizar esta comunicación de padres a hijos. Esto implica que el estado debe ser definido en el componente padre para después ser pasado al componente hijo a través de props, respetando una jerarquía clara donde el flujo de datos va en una sola dirección descendente.

¿Es posible crear estados derivados a partir de los estados existentes?

Crear estados derivados es un método poderoso para realizar cálculos basados en estados anteriores. Por ejemplo, si queremos llevar un registro del número de tareas completadas y el total de tareas, necesitamos calcular estos valores basándonos en el estado actual de la lista de tareas. Esto se consigue mediante la utilización de métodos de manipulación de arrays en JavaScript, tales como filter o map, que nos permiten derivar nueva información sin alterar el estado original.

Implementando el contador de tareas

Para que el componente TodoCounter muestre información precisa en vez de números arbitarios, se requiere de la manipulación del estado de tareas o "todos". Primero, se traslada el estado relacionado con la búsqueda de tareas del componente TodoSearch al componente padre, en este caso App. Luego, se utilizan las props para pasar tanto el estado como su actualizador (setSearchValue) de nuevo al TodoSearch y a cualquier otro componente que lo requiera.

El proceso se completa creando dos nuevas variables: completedTodos y totalTodos. La primera representa el número de tareas completadas, calculado a partir del estado de tareas existente, y la segunda simplemente refleja la longitud total del array de tareas. Estos cálculos nos permiten obtener valores dinámicos que se actualizan en respuesta a los cambios en el estado de las tareas.

Desarrollo práctico y continuo

Con estas técnicas, se logra no solo compartir y actualizar estados dentro de una aplicación React, sino también derivar nueva información y funcionalidades a partir de ellos. Esta clase sienta las bases para que en futuras lecciones se pueda abordar la búsqueda de tareas de forma dinámica, transformando las interacciones del usuario en acciones concretas que modifican la visualización de la lista de tareas.

ReactJS es más que una simple biblioteca; es un ecosistema que proporciona a los desarrolladores las herramientas necesarias para crear aplicaciones interactivas y cohesivas. Siguiendo estos pasos y practicando con los conceptos, te encontrarás bien equipado para manejar estados y props de manera efectiva en tus futuros proyectos. ¡Sigue explorando, practicando y aprendiendo!