Eventos: la UI que responde al usuario

Una interfaz sin interacción es un póster. Los eventos la vuelven viva: un clic, un cambio en un input, una tecla. En React manejas eventos con props como onClick —similar a lo que hiciste en el DOM del SC-02, pero declarativo—. Y aprendes el patrón clave: cómo un hijo avisa hacia arriba llamando una función que recibió como prop.

El timbre, otra vez

Manejar un evento

Los eventos se conectan con props en camelCase (onClick, onChange, onSubmit) que reciben una FUNCIÓN —el manejador:

Cuidado con el error #1 de principiante: onClick={saludar} pasa la FUNCIÓN (React la llamará al hacer clic); onClick={saludar()} la LLAMA de inmediato al renderizar (mal —el mismo error de los paréntesis del SC-02). Sin paréntesis para pasar; con paréntesis solo dentro de una arrow function (onClick={() => saludar()}) cuando necesitas controlar cómo se llama.

Pasar argumentos al manejador

Si tu manejador necesita datos (cuál gasto borrar, por ejemplo), lo envuelves en una arrow function que los pasa:

function borrarGasto(id: number) {
console.log("borrar", id);
}

// ❌ borrarGasto(g.id) se ejecutaría AL RENDERIZAR, no al hacer clic:
<button onClick={borrarGasto(g.id)}>Borrar</button>

// ✅ una arrow function pospone la llamada hasta el clic, pasando el argumento:
<button onClick={() => borrarGasto(g.id)}>Borrar</button>

La arrow function () => borrarGasto(g.id) es una función que, CUANDO se ejecute (al clic), llamará a borrarGasto con ese id. Es la forma estándar de pasar datos a un manejador —muy común en listas, donde cada botón "borrar" necesita saber qué elemento le toca.

El patrón clave: eventos hacia arriba

Recuerda la regla del módulo anterior: los datos fluyen hacia abajo (props), pero ¿cómo avisa un hijo a su padre de que pasó algo? El padre le pasa una FUNCIÓN como prop, y el hijo la LLAMA cuando ocurre el evento:

Mini-reto

Conecta padre e hijo: 1) crea un componente <Estrella> con props valor (número) y onElegir (función (valor: number) => void); 2) al hacer clic en la estrella, que llame onElegir(valor); 3) en el padre, renderiza cinco estrellas (1 a 5) y maneja onElegir mostrando cuál se eligió. Sientes el patrón "el hijo avisa, el padre decide" —la base de todo componente interactivo.

Qué sigue

Cierras los fundamentos con la COMPOSICIÓN: cómo un componente puede envolver a otros mediante la prop especial children, para crear contenedores reutilizables (tarjetas, modales, layouts). Luego, el reto del módulo junta componentes, props, listas y eventos en una primera versión de "Mi Bolsillo" hecha con React.