Actualizar el estado en React no siempre significa pasar un valor fijo como true o false. Cuando el nuevo valor depende del anterior, puedes pasar una función al actualizador y trabajar con el estado previo. Esto resulta clave si manejas modales con portales y necesitas alternar visibilidad de forma elegante.

¿Cómo comparar cambios entre commits con git diff?

Antes de revisar la solución del reto, vale la pena conocer una forma práctica de auditar tu propio código. Cada experimento o feature merece su propio commit, y eso te permite mirar atrás cuando lo necesitas.

Con el comando git diff seguido del ID de un commit anterior, ves todas las diferencias entre tu estado actual y ese punto en la historia. Es útil para revisar qué tocaste durante un reto sin abrir archivo por archivo.

¿Qué hace git diff con un commit ID? Compara tu código actual contra ese commit y muestra línea por línea lo que cambió. Sirve para revisar avances o detectar modificaciones no intencionales. [01:00]

¿Cómo pasar una función al setState de React?

Aquí está el corazón del reto. En lugar de escribir setOpenModal(true) o setOpenModal(false), puedes enviarle una arrow function que reciba el estado anterior como parámetro y devuelva el nuevo valor.

jsx onClick={() => setOpenModal(state => !state)}

El parámetro state representa el valor actual de openModal. Al devolver !state, niegas ese valor: si era false, pasa a true; si era true, pasa a false. Así logras un toggle limpio sin depender de leer el estado desde fuera.

¿Por qué usar el estado anterior en lugar de un valor fijo?

Porque garantiza que la actualización use siempre el valor más reciente. Si varios eventos disparan cambios seguidos, React puede agruparlos, y pasar una función evita errores de sincronización. Para alternar un modal, esta forma es la más elegante y segura.

¿Cuándo conviene pasar una función a setState? Siempre que el nuevo valor dependa del anterior, como en toggles, contadores o acumuladores. Te asegura trabajar con el estado más actualizado. [02:30]

¿Cómo se conectan el botón y el modal con props?

El componente CreateTodoButton recibe la prop setOpenModal desde el componente padre. Antes se llamaba sin propiedades; ahora recibe el actualizador del estado y lo usa dentro de su evento de clic. Eso reemplaza los antiguos console.log por un comportamiento real.

• El padre define el estado openModal y su actualizador setOpenModal.
• Le pasa setOpenModal como prop al botón.
• El botón ejecuta setOpenModal(state => !state) al hacer clic.

Con esa cadena, el mismo botón abre y cierra el modal según su estado actual.

¿Para qué sirve el z-index 1 en el botón?

El CreateTodoButton vive en un nodo HTML distinto al del portal del modal. Sin ayuda extra, quedaría tapado cuando el modal aparece. Al asignarle z-index: 1 en su CSS, el botón se posiciona una capa por encima y sigue siendo visible y clickeable, lo que permite cerrar el modal con el mismo botón que lo abrió. [03:45]

¿Por qué nombrar la clase modal-background y no modal?

Dentro del proyecto ya existe un nodo HTML llamado Modal con M mayúscula, que funciona como root del portal. Usar la clase CSS modal-background evita confusiones entre el contenedor del portal y el fondo visual del modal.

A esa clase se le aplican varias propiedades para lograr el efecto de superposición:

• Color de fondo semi transparente para oscurecer la pantalla detrás.
• display: flex para centrar el contenido del modal.
• Dimensiones que ocupan todo el espacio disponible de la ventana.

El resultado en el navegador es claro: al hacer clic en crear nuevo to do, aparece un modal blanco centrado sobre un fondo translúcido, y el botón de crear sigue visible gracias al z-index. Cuesta poco código y se ve profesional.

¿Te animas a aplicar este patrón de toggle con función previa en otros estados booleanos de tu app? Cuéntame en los comentarios qué componentes vas a refactorizar.