Props y composición

Las props son la forma normal de pasar datos de un componente padre a uno hijo.

function ProductCard({ title, price }) {
  return (
    <article>
      <h2>{title}</h2>
      <p>{price} EUR</p>
    </article>
  );
}

function App() {
  return <ProductCard title="Teclado" price={89} />;
}

Las props son de solo lectura. Un hijo no debería modificarlas.

Props como contrato

Piensa que las props definen la API pública del componente.

Si un componente necesita 12 props difíciles de entender, normalmente está mal diseñado o tiene demasiadas responsabilidades.

children y composición

Una de las props más importantes es children.

function Card({ title, children }) {
  return (
    <section className="card">
      <h2>{title}</h2>
      <div>{children}</div>
    </section>
  );
}

function App() {
  return (
    <Card title="Perfil">
      <p>Contenido interno</p>
    </Card>
  );
}

Esto permite componer piezas sin crear componentes rígidos para cada variante.

Pasar funciones como props

También puedes pasar comportamiento:

function Button({ onClick, children }) {
  return <button onClick={onClick}>{children}</button>;
}

Eso hace que los componentes sean reutilizables sin acoplarlos a una acción concreta.

Buenas reglas con props

• Nombra props de forma obvia
• Pasa lo mínimo necesario
• Evita objetos gigantes si solo usas dos campos
• Usa composición antes de hacer componentes llenos de if

La siguiente pieza clave es el estado: datos que cambian con la interacción del usuario.