Construyendo componentes reutilizables y aislados

Un componente reutilizable expone las decisiones que necesita mediante props y no conoce la fuente concreta de datos. Una fila de carrito puede recibir nombre, precio y cantidad; no debe leer una base global ni calcular reglas ocultas que otras pantallas no puedan revisar.

Ejemplo resuelto

type FilaProps = { nombre: string; precio: number; cantidad: number };
export function Fila({ nombre, precio, cantidad }: FilaProps) {
  return <li>{nombre}: {precio * cantidad} EUR</li>;
}

Con precio 6 y cantidad 2, la fila muestra 12 EUR.

Los importes son valores enteros de aula. Para dinero real, elige una representación como céntimos enteros y un formato de moneda con Intl.NumberFormat; evita acumular cantidades decimales sin considerar redondeo. En una lista de filas usa una key basada en el ID estable del producto.

Pruébalo

1. Define las props mínimas de una fila.

2. Renderiza tres productos con datos distintos.

3. Comprueba el importe de cada fila.

4. Cambia un dato desde el componente padre.

Comprueba tu resultado

Error frecuente: crear un componente genérico que recibe un objeto enorme e indocumentado. Corrección: usa props pequeñas y tipadas.

Ejercicio: entrega Pincel, 5, 3, Papel, 4, 2 y Tinta, 7, 1; los importes esperados son 15 EUR, 8 EUR y 7 EUR, sin alterar los datos al cambiar solo la cantidad de Papel.