Pasar props a un componente

Props conocidas

Las props son los datos que se pasan a un elemento JSX. Por ejemplo, className, src, alt, width y height son algunas de las props que se pueden pasar a un elemento <img>:

Las props que puedes utilizar con una etiqueta <img> están predefinidas (ReactDOM se ajusta al estándar HTML). Sin embargo, puedes pasar cualquier prop a tus propios componentes, como <Avatar>, para personalizarlos. ¡Aquí te mostramos cómo hacerlo!

Pasar props a un componente

En este código, el componente Profile no está pasando ninguna prop a su componente hijo, Avatar:

export default function Profile() {
  return (
    <Avatar />
  );
}

Puedes pasar props al elemento Avatar en dos pasos.

Paso 1: Pasar props al component hijo

Primero, pasa algunas props al elemento Avatar. Por ejemplo, vamos a asignar dos props: person (un objeto) y size (un número):

export default function Profile() {
  return (
    <Avatar
      person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }}
      size={100}
    />
  );
}

Ahora puedes acceder a estas props dentro del componente Avatar.

Paso 2: Acceder a props dentro del componente hijo

Puedes acceder a estas props especificando sus nombres person, size separados por comas dentro de ({ y }) justo después de function Avatar. Esto te permitirá utilizarlas dentro del código de Avatar como si fueran variables.

function Avatar({ person, size }) {
  // puedes acceder a los valores de person y size desde aquí
}

Agrega lógica a Avatar que utilice las props person y size para la renderización, ¡y eso es todo!.

Ahora puedes configurar Avatar para que se renderice de diferentes maneras con distintas props. ¡Prueba ajustando los valores!

Las props te permiten considerar de forma independiente los componentes padre e hijo. Por ejemplo, puedes modificar las props person o size dentro del componente Profile sin preocuparte por cómo serán utilizadas por el componente Avatar. De manera similar, puedes cambiar la forma en que Avatar utiliza estas props sin necesidad de revisar el componente Profile.

Considera las props como «controles» que puedes ajustar. Cumplen el mismo papel que los argumentos de una función—de hecho, ¡las props son el único argumento de tu componente! Las funciones de los componentes de React aceptan un único argumento, un objeto props:

function Avatar(props) {
  let person = props.person;
  let size = props.size;
  // ...
}

En general, no necesitas acceder al objeto completo de props, por lo que puedes desestructurarlo en props individuales.

function Avatar({ person, size }) {
  // ...
}

function Avatar(props) {
  let person = props.person;
  let size = props.size;
  // ...
}

Asignar un valor predeterminado para una prop

Si quieres asignar un valor predeterminado para una prop en caso de que no se especifique ningún valor, puedes hacerlo mediante la desestructuración colocando = seguido del valor predeterminado justo después del parámetro:

function Avatar({ person, size = 100 }) {
  // ...
}

Ahora, si renderizas <Avatar person={...} /> sin la prop size, el valor de size se establecerá automáticamente en 100.

El valor predeterminado sólo se utilizará si falta la prop size o si se pasa size={undefined}. Sin embargo, si se pasa size={null} o size={0}, el valor predeterminado no se aplicará.

Reenviar props con la sintaxis de propagación JSX

A veces, pasar props se vuelve muy repetitivo:

function Profile({ person, size, isSepia, thickBorder }) {
  return (
    <div className="card">
      <Avatar
        person={person}
        size={size}
        isSepia={isSepia}
        thickBorder={thickBorder}
      />
    </div>
  );
}

No hay ningún problema en tener código repetitivo—ya que puede ser más legible. Sin embargo, en ocasiones, es posible que prefieras ser más conciso. Algunos componentes reenvían todas sus props a sus hijos, como lo hace Profile con Avatar. Dado que no utilizan directamente ninguna de sus props, tiene sentido utilizar una sintaxis de «propagación» más concisa:

function Profile(props) {
  return (
    <div className="card">
      <Avatar {...props} />
    </div>
  );
}

Esto permite reenviar todas las props de Profile a Avatar sin la necesidad de especificar cada una de ellas.

Recuerda utilizar la sintaxis de propagación con moderación. Si estás utilizando esta sintaxis en cada componente, es probable que algo no esté correctamente estructurado. En muchos casos, esto sugiere que deberías dividir tus componentes y pasar los hijos como elementos JSX separados. ¡Más información sobre esto a continuación!

Pasar JSX como hijos

Es común anidar etiquetas nativas del navegador:

<div>
  <img />
</div>

En ocasiones, querrás anidar tus propios componentes de la misma forma:

<Card>
  <Avatar />
</Card>

Al anidar contenido dentro de una etiqueta JSX, el componente padre recibirá ese contenido a través de una prop llamada children. En el ejemplo a continuación, el componente Card recibe una prop children con el valor de <Avatar /> y lo renderiza dentro de un div contenedor:

Prueba cambiando <Avatar> dentro de <Card> con algún texto para ver cómo el componente Card puede envolver cualquier contenido anidado. No es necesario que el componente «sepa» qué se está renderizando dentro de él. Este patrón flexible se puede observar en muchos casos.

Puedes imaginar un componente con una prop children como si tuviera un «hueco» que puede ser «llenado» por sus componentes padres con JSX arbitrario. La prop children suele utilizarse para crear envoltorios visuales como paneles, rejillas, etc.

Cómo las props cambian con el tiempo

El componente Clock que se muestra a continuación recibe dos props de su componente padre: color y time. (Se omite el código del componente padre porque utiliza estado, del cual no ahondaremos en este momento.)

Prueba cambiando el color en la lista desplegable que aparece a continuación:

Este ejemplo demuestra que un componente puede recibir props que cambian a lo largo del tiempo. ¡Las props no siempre son estáticas! Aquí, la prop time cambia a cada segundo, y la prop color cambia cuando se elige un color diferente. Las props reflejan los datos de un componente en cualquier momento, y no sólo al inicio.

Sin embargo, las props son inmutables—un término de la informática que significa «inalterable». Si un componente necesita cambiar sus props (por ejemplo, en respuesta a una interacción del usuario o nuevos datos), debe «solicitar» a su componente padre que le pase nuevas props—¡un nuevo objeto! Las props antiguas se descartarán y eventualmente el motor de JavaScript liberará la memoria que ocupaban.

No intentes «cambiar las props». Cuando necesites responder al input del usuario (como cambiar el color seleccionado), deberás «establecer un estado», lo cual puedes aprender en El estado: la memoria de un componente.