Props

Imagina que estás construyendo un componente Greeting para un banner de bienvenida, y cada visitante que inicia sesión necesita ver su propio nombre en lugar de un nombre único para todos. Un componente que solo puede renderizar un valor fijo no puede hacer eso por sí solo. Props (abreviatura de properties) es cómo pasas datos a un componente desde afuera, de la misma manera que un argumento pasa un valor a una función. Los props se escriben en un componente igual que los atributos en una etiqueta HTML, y el componente los lee a través de un único parámetro.

function Greeting({ name }) {
  return <h1>Hola, {name}</h1>
}
// uso: <Greeting name="María" />

Greeting recibe un prop, name. React recopila todos los atributos que escribes en <Greeting> en un único objeto y lo pasa como el primer argumento del componente, así que { name } aquí está desestructurando ese objeto para extraer el valor name directamente. Llama a <Greeting name="María" /> y name será "María" dentro de la función. Llámalo de nuevo con un nombre diferente y obtendrás un encabezado diferente, del mismo componente.

Los props fluyen en una dirección: desde donde se usa un componente, hacia adentro del componente. Dentro de Greeting, name se comporta como una variable normal, pero el componente no puede cambiarla: los props son de solo lectura. Si un componente necesita datos que cambien con el tiempo, eso es trabajo para state, que cubriremos algunos capítulos adelante.

Valores por defecto

Si un prop podría estar ausente, dale un valor por defecto igual que le darías a cualquier parámetro de función: un = en el patrón de desestructuración.

function Greeting({ name = 'amigo' }) {
  return <h1>Hola, {name}</h1>
}

Llama a <Greeting /> sin el prop name y name volverá a 'amigo'. Pasa un name y anulará el valor por defecto. Esta es la sintaxis ordinaria de parámetros por defecto de JavaScript, aplicada al objeto que React le entrega al componente.

El prop children

Algunos componentes necesitan envolver otro contenido en lugar de recibirlo a través de un atributo. Escribe contenido entre las etiquetas de apertura y cierre de un componente, y React lo pasa automáticamente como un prop especial llamado children.

function Card({ children }) {
  return <div className="card">{children}</div>
}

// uso:
// <Card>
//   <p>Lo que escribas aquí se convierte en el prop children de Card.</p>
// </Card>

children funciona exactamente como cualquier otro prop: lo lees a través del mismo parámetro desestructurado, y el componente decide dónde renderizarlo. La única diferencia es cómo llega, a través del contenido de las etiquetas en lugar de un atributo nombrado.

Pasar cualquier valor de JavaScript

Un prop puede contener cualquier valor de JavaScript: números, booleanos, objetos, arrays, incluso funciones. Envuelve el valor entre llaves en lugar de comillas.

function UserCard({ user, onSelect }) {
  return <button onClick={() => onSelect(user.id)}>{user.name}</button>
}

// uso: <UserCard user={{ id: 1, name: 'María' }} onSelect={handleSelect} />

user aquí es un objeto, y onSelect es una función pasada hacia abajo para que el componente pueda llamarla. El onClick del botón ejecuta onSelect cuando alguien hace clic, un manejador de eventos que el capítulo Events cubre en detalle a continuación; tómalo por ahora como algo confiable. Así es cómo se comunican los componentes: los datos bajan a través de los props, y el comportamiento viaja del mismo modo, como una función que el componente hijo puede llamar.

Flujo de datos unidireccional

Los props fluyen hacia abajo en el árbol de componentes a propósito. Un padre pasa datos a un hijo, ese hijo puede pasarlos más abajo, y nada fluye hacia arriba a través de los props. Un componente nunca debe escribir en su propio objeto de props ni mutar un objeto o array que recibió a través de un prop; trata todo lo que te entregan como fijo.

Esa restricción es lo que mantiene el renderizado predecible. Cuando state cambia en algún lugar y React vuelve a renderizar los componentes afectados, cada renderizado recomputa su JSX a partir de los props y state actuales de ese componente. Si un componente pudiera llegar hacia arriba y mutar los props que un padre le dio, el padre perdería cualquier imagen confiable de sus propios datos, y rastrear un bug significaría revisar cada hijo por el que pasó un valor en lugar del único lugar donde realmente cambió. Mantener los props de solo lectura mantiene eso rastreable: cualquier valor en tu UI tiene exactamente un lugar donde se establece.

Los props introducen datos a un componente desde afuera. Algunos capítulos adelante, state cubre cómo un componente mantiene y actualiza sus propios datos con el tiempo.

JunoProps are read-only Los props son cómo un componente recibe información de quien lo usa, igual que un argumento alimenta una función. Los lees del parámetro desestructurado, como { name }, y un componente nunca cambia los props que recibe. Dale a uno un valor por defecto con = cuando podría estar ausente, y recuerda que todo lo que pongas entre las etiquetas de un componente llega como su prop children.

JunoProps are read-only Los props son las entradas a un componente: desestructúralos del parámetro, establece valores por defecto para los que podrían faltar, y trata children como otro prop que llega a través del contenido de las etiquetas en lugar de un atributo. Pueden contener cualquier cosa, strings, objetos, funciones, así que úsalos para pasar datos y comportamiento hacia abajo juntos. No mutes lo que te dan; los props permanecen de solo lectura.

JunoProps are read-only Los props llevan datos en una dirección, hacia abajo en el árbol, y esa dirección es fundamental: un componente que muta sus propios props rompe la garantía de que un renderizado refleja una entrada conocida. Los parámetros por defecto y children son sintaxis ordinaria de JavaScript y JSX apilada sobre un objeto simple. Mantén los props inmutables en el lado del componente y el renderizado sigue siendo predecible, la propiedad en la que confías en todo lo demás en React.

Siguiente: Lists and keys, donde un componente renderiza un array completo de datos.