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 fijo para todos. Un componente que solo puede renderizar un valor único y fijo no puede hacer eso por sí solo. Props (abreviatura de properties) es la forma en que pasas datos a un componente desde afuera, igual que un argumento pasa un valor a una función. Escribes props en un componente de la misma manera que escribes atributos en una etiqueta HTML, y el componente los lee a través de un parámetro único.

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

Greeting recibe un prop, name. React reúne cada atributo 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 de name directamente. Llama a <Greeting name="Ana" /> y name es "Ana" 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 sola dirección: desde donde se usa un componente, hacia adentro del componente mismo. Dentro de Greeting, name se comporta como una variable ordinaria, pero el componente no puede cambiarlo: los props son de solo lectura. Si un componente necesita datos que cambien con el tiempo, ese es un 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 lo harías con un parámetro cualquiera de una 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 en absoluto, y name se vuelve 'amigo'. Pasa un name, y anula el valor por defecto. Esta es la sintaxis ordinaria de parámetros por defecto de JavaScript, aplicada al objeto que React entrega al componente.

La 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 una prop especial llamada children.

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

// uso:
// <Card>
//   <p>Lo que sea que vaya aquí se convierte en la 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 con nombre.

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: 'Ana' }} onSelect={handleSelect} />

user aquí es un objeto, y onSelect es una función que se pasa hacia abajo para que el componente pueda llamarla. El onClick del botón ejecuta onSelect cuando alguien lo hace clic, un manejador de eventos que el capítulo Events cubre completamente a continuación; por ahora tómalo como algo conocido. Así es como los componentes se comunican: los datos viajan hacia abajo a través de props, y el comportamiento viaja de la misma manera, como una función que el 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 pasarlo más abajo, y nada fluye de regreso hacia arriba a través de props. Un componente nunca debe escribir en su propio objeto props o mutar un objeto o array que recibió a través de un prop; trata todo lo que se te entrega como fijo.

Esa restricción es lo que mantiene el renderizado predecible. Cuando el 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 alcanzar hacia arriba y mutar los props que un padre le dio, el padre perdería cualquier idea 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 lo mantiene rastreable: cualquier valor en tu UI tiene exactamente un lugar donde se establece.

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

JunoLos props son de solo lectura 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 uno un valor por defecto con = cuando podría estar ausente, y recuerda que cualquier cosa que pongas entre las etiquetas de un componente llega como su prop children.

JunoLos props son de solo lectura Los props son las entradas a un componente: desestructúralos del parámetro, establece valores por defecto para los que podrían estar ausentes, y trata children como otro prop que simplemente 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 juntos hacia abajo. No mutes lo que se te entrega; los props permanecen de solo lectura.

JunoLos props son de solo lectura Los props llevan datos en una sola 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 superpuesta sobre un objeto simple. Mantén los props inmutables del lado del componente y el renderizado permanece predecible, la propiedad en la que estás confiando en cualquier otro lugar de React.

Próximo: Lists and keys, donde un componente renderiza un array completo de datos.