Componentes y props: piezas que reciben datos

Un componente que solo muestra datos fijos es un cartel. Su poder aparece cuando RECIBE datos de fuera y se adapta: la misma <TarjetaGasto> sirve para el café y para el bus, solo cambiando lo que le pasas. Ese "lo que le pasas" son las PROPS —el mecanismo con el que los componentes se comunican—, y tiparlas con TypeScript (que ya dominas) las hace seguras de verdad.

El molde y sus rellenos

Pasar y recibir props

Las props se pasan como atributos al usar el componente, y se reciben como el parámetro de la función. Con TypeScript, defines su forma:

Fíjate en el flujo: <TarjetaGasto nombre="Café" valor={4000} /> pasa los datos, y el componente los recibe desestructurados en su parámetro { nombre, valor }. Los strings van entre comillas (nombre="Café"); todo lo demás (números, booleanos, objetos) va entre llaves (valor={4000}). Y el tipo TarjetaGastoProps —tu TypeScript de siempre— garantiza que nadie use la tarjeta sin darle un nombre string y un valor number.

Las props fluyen en UNA dirección

Props con valores por defecto y opcionales

Como son parámetros de función (que ya tipas en TS), las props pueden ser opcionales y tener valores por defecto:

type BotonProps = {
texto: string;
variante?: "primario" | "secundario";   // opcional (unión de literales, SC-03)
};

// valor por defecto al desestructurar:
function Boton({ texto, variante = "primario" }: BotonProps) {
const fondo = variante === "primario" ? "#6d28d9" : "#151e31";
return (
  <button style={{ background: fondo, color: "white", padding: "8px 16px" }}>
    {texto}
  </button>
);
}

// se usa con o sin la prop opcional:
<Boton texto="Guardar" />                       // variante = "primario" (default)
<Boton texto="Cancelar" variante="secundario" />

Todo lo que aprendiste de funciones en TypeScript aplica: props opcionales con ?, valores por defecto al desestructurar, uniones de literales para variantes válidas. React no reinventa nada —las props SON parámetros de una función, tipados como cualquier otro.

Mini-reto

Construye piezas reutilizables: 1) crea un componente Avatar con props nombre (string) e inicial (string), tipadas, que muestre un círculo con la inicial y el nombre al lado; 2) úsalo tres veces con datos distintos; 3) agrega una prop opcional color? con un valor por defecto para el fondo del círculo. Sientes cómo un molde bien diseñado se reutiliza sin esfuerzo.

Qué sigue

Sabes crear componentes y pasarles datos uno a uno. Pero casi siempre tus datos vienen en LISTAS —un array de gastos, de usuarios—. La próxima lección enseña a renderizar listas con .map() y la misteriosa prop key, que React necesita para no confundirse. El patrón que usarás en cada app.