Compartir Estados

Paso 6: Compartir Estados (Lifting State Up)

En este sexto paso resolveremos el aislamiento del paso anterior elevando el estado al componente Padre, que es com煤n al resto de componentes (el componente App).

En React, los datos fluyen en una sola direcci贸n (de arriba a abajo). Si el formulario (TodoForm) necesita a帽adir elementos a la lista (TodoList), el estado de la lista debe vivir en App.

Luego, App le pasa a sus hijos tanto los datos como las funciones callback, poder modificar ese estado mediante Props.

馃搷Un callback es una funci贸n que se pasa como argumento a otra funci贸n para que se ejecute m谩s tarde, generalmente cuando se complete una tarea o se produzca un evento.
C贸digo del Paso 6 (index.html)

Conceptos clave del Paso 6:

  1. Pasar callbacks por Props: Un componente Hijo no puede modificar directamente el estado de su Padre. La soluci贸n es que el Padre le pase una funci贸n (ejemplo: onAgregarTarea) para que el Hijo la invoque cuando ocurra un evento.
  2. Inmutabilidad en React: En React, debemos tratar el estado como le铆ble pero no modificable directamente. Nunca se ejecuta tareas.push(nueva) directamente. Para actualizar las tareas, se crea un nuevo array usando el operador spread: setTareas([nueva, ...tareas]).
  3. Puntos d茅biles a resolver: Si se prueba agregar varias tareas y luego se recarga la p谩gina (F5), todas las tareas nuevas se pierden. Adem谩s, al agregar una tarea hay que hacer clic manualmente en el input para volver a escribir.

Para solucionar la persistencia en FrontEnd y la manipulaci贸n del DOM, usaremos las Puertas de Escape en el Paso 7.