Props: pasar datos a un componente

Aprende a hacer que tus componentes sean reutilizables pasándoles datos mediante props.

7 min · 3 preguntas

Un componente que siempre muestra lo mismo no es muy útil. Las props (abreviatura de "propiedades") son los datos que pasas a un componente, exactamente como los argumentos de una función. Piensa en una tarjeta de invitación: la plantilla es la misma para todos, solo cambia el nombre del invitado. El componente es la plantilla, la prop es el nombre.

function Greeting(props) {
  return <p>Hello, {props.name}!</p>;
}

function App() {
  return (
    <div>
      <Greeting name="Lea" />
      <Greeting name="Karim" />
    </div>
  );
}

En App, escribes name="Lea" como un atributo HTML: React reúne todos estos valores en un objeto, que el componente recibe con el nombre props. Luego lees props.name dentro de las llaves. En la práctica, a menudo desestructuras las props directamente entre los paréntesis de la función: function Greeting({ name }). Un punto importante más: el texto va entre comillas, pero todo lo demás (números, booleanos, arrays) va entre llaves.

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

function App() {
  return <ProfileCard name="Nadia" age={31} />;
}

Ahí reside todo el poder de las props: una red social no escribe un componente por cada publicación, escribe un solo componente Post y le pasa props diferentes millones de veces. Escribes la plantilla una vez, la usas en todas partes.

Prueba de conocimientos

Comprueba que has retenido los puntos clave de esta lección.

1. ¿Para qué sirven las props?
   • Para pasar datos de un componente padre a un hijo
   • Para almacenar datos que cambian con el tiempo
   • Para aplicar estilos CSS a un componente
2. ¿Cómo pasas el número 25 a un componente Profile?
   • <Profile age="25" />
   • <Profile age={25} />
   • <Profile age=25 />
3. ¿Puede un componente modificar las props que recibe?
   • Sí, siempre que lo haga dentro del return
   • Sí, pero solo las cadenas de texto
   • No, las props son de solo lectura