Paso de propiedades: Props

Paso 3: Enviar Props a los Componentes

En este tercer paso eliminaremos el texto duplicado del paso anterior usando Props (propiedades).

Las Props (abreviatura de properties) son el mecanismo que utilizan React y otros frameworks como por ejemplo Svelte y Vue, para pasar información desde un componente Padre hacia un componente Hijo (en una sola dirección).
Funcionan como los argumentos de una función: permiten que los componentes sean reutilizables y dinámicos.

Una regla fundamental en React es que las props son de solo lectura (inmutables). Un componente hijo nunca debe modificar las props que recibe; solo las lee y las renderiza.

1. Pasar y recibir props

Para pasar una prop, se añade como si fuera un atributo HTML en el componente padre. En el componente hijo, ésta se recibes como un objeto en los parámetros de la función.

Pasar y recibir props. Ejemplo.

2. Desestructurar props

La práctica recomendada es desestructurar las props directamente en los argumentos de la función, en vez de escribir props.nombre constantemente (caso del ejemplo anterior)

Desestructurar props. Ejemplo.

3. Tipos de datos que se pueden pasar mediante props

Se pueden pasar cualquier tipo de dato de JavaScript mediante llaves { }. Ejemplo:

Pasar props. Ejemplo.

4. Valores por defecto

La forma de asignar valores por defecto, en caso de que el padre no pase una prop específica, es la siguiente:

Valores por defecto. Ejemplo.

5. Una prop especial: children

Las prop children no se pasan como un atributo normal (como por ejemplo nombre="María"), sino metiendo contenido dentro de las etiquetas del componente.

5.1 Ejemplo paso a paso

Imaginemos que queremos crear un componente llamado Caja que le ponga un borde bonito a cualquier cosa que se meta dentro.

a. Definimos el componente Caja
b. Usamos Caja con diferentes contenidos

(Ahora, podemos usar Caja como si fuera un contenedor o "envoltorio")

Los children Sirve para crear **componentes reutilizables que funcionan como contenedores o plantillas**, sin importar qué tipo de contenido vayan a llevar dentro.

5.2 ¿Ya conoces Astro? Comparativa:

Si ya conoces Astro, las children son como los Layouts de Astro.
La prop children de React hace exactamente el mismo trabajo que el elemento <slot /> en Astro.

La idea es idéntica, solo cambia la sintaxis de cómo se le indica al marco dónde renderizar ese contenido:

En Astro (usando <slot />)
MiLayout.astro

No se necesita declarar nada en el script, simplemente se coloca la etiqueta <slot /> donde se desea insertar el contenido.

En React (usando {children})

En React se tiene que recibir children como una prop dentro de los argumentos de la función y colocar {children} entre llaves en el JSX.

MiLayout.jsx

Código del paso 3

Ahora que ya tenemos un poco más clara la teoría de cómo usar las props en React, acá tenemos el código para eliminar el texto duplicado del paso 2, utilizando props.

Código del Paso 3 (index.html)

Conceptos clave del paso 3:

  1. Las expresiones JavaScript van entre llaves { }: Dentro de JSX, cualquier valor que pongas dentro de llaves { } se evalúa como JavaScript. Por eso escribimos {titulo} o {tarea.texto}.
  2. Desestructuración de argumentos: En vez de escribir function Header(props) y luego utilizar props.titulo, la sintaxis limpia moderna es desestructurar directamente: function Header({ titulo }).
  3. El método .map() y la prop key: Para renderizar una lista dinámica en React se transforma el array usando .map(). Además, React exige pasar una prop key única a cada elemento de la lista (key={tarea.id}) para identificar cuáles ítems cambian, se añaden o se eliminan eficientemente.