Props: pasar datos a los componentes

Al finalizar este tema

Comprenderás el funcionamiento de las props, el papel de children y qué es el problema de la propagación de props.

¿Qué son las props?

Al igual que se pueden añadir atributos a las etiquetas HTML, también se pueden pasar datos a los componentes de React:

<UserCard name="Alice" age={25} />

Estos son name y age, que son props (propiedades). Es la forma en que un componente padre pasa datos a un componente hijo.

El receptor

function UserCard({ name, age }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>{age}years old</p>
    </div>
  );
}

Se extraen solo las propiedades necesarias mediante la desestructuración. También se puede recibir el objeto props completo:

function UserCard(props) {
  return <h2>{props.name}</h2>;
}

Las propiedades son de solo lectura.

function UserCard({ name }) {
  name = "Bob"; // Funciona, pero no se debe hacer
  return <h2>{name}</h2>;
}

En React, las props deben considerarse como de solo lectura. Si un componente hijo modifica los datos proporcionados por el componente padre, el flujo de datos se vuelve inconsistente.

Si deseas modificar un valor, el componente padre debe gestionar el estado y pasar la función de actualización como prop:

function Parent() {
  const [name, setName] = useState("Alice");
  return <Child name={name} onNameChange={setName} />;
}

function Child({ name, onNameChange }) {
  return <input value={name} onChange={e => onNameChange(e.target.value)} />;
}

Valores predeterminados

Puede establecer valores predeterminados para cuando no se pasan props:

function Button({ label = "Click", size = "medium" }) {
  return <button className={size}>{label}</button>;
}

<Button />              // label="Click", size="medium"
<Button label="Save" /> // label="Save", size="medium"

children — una prop especial

El contenido que se coloca entre las etiquetas se pasa como la prop children:

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

<Card>
  <h2>Title</h2>
  <p>Content</p>
</Card>

Es útil al crear componentes de diseño. Permite reutilizar la estructura contenedora y modificar solo el contenido interno.

Prop Drilling

<App>          → user
  <Layout>     → user
    <Sidebar>  → user
      <Avatar> → user.name solo aquí

Se denomina prop drilling al proceso de transmitir datos a través de componentes intermedios. Los componentes intermedios (como Layout o Sidebar) deben recibir estos datos, incluso si no los utilizan directamente con user.

Si la transmisión de datos se realiza en dos o tres niveles, no hay problema, pero si la profundidad aumenta, se debe considerar el uso de Context o bibliotecas de gestión de estado.

Conceptos clave

Las props son un método mediante el cual los componentes padres transmiten datos a los componentes hijos y son de solo lectura. children es una prop especial que transmite el contenido entre etiquetas. Cuando la transmisión de datos se vuelve demasiado profunda, surge el problema del prop drilling.