Cómo pasar props de padre a hijo en React

Las props en React son la clave para que cada componente muestre información distinta sin duplicar código. Si tienes un catálogo de propiedades donde cada tarjeta necesita su propio título, imagen, ubicación y precio, aquí aprendes cómo lograrlo. Ideal para quienes están construyendo interfaces reutilizables con componentes.

Hasta este punto, las cards mostraban siempre la misma información. Pero en una aplicación real cada propiedad tiene datos diferentes, y ahí es donde entran las props para resolver el problema de raíz.

Qué son las props y por qué comunican componentes en React

Las props son la forma que tiene React para comunicarse entre componentes. Permiten enviar información desde un componente padre hacia un componente hijo [00:20].

Por su estructura pueden recordarte a los atributos de HTML, pero hay una diferencia importante: con props no solo pasas texto, sino cualquier valor de JavaScript, incluyendo objetos, arrays y funciones.

¿Qué son las props en React? Son datos que un componente padre envía a un componente hijo. Funcionan parecido a los atributos de HTML, pero aceptan cualquier valor de JavaScript, no solo texto.

En el ejercicio partimos de un App.jsx ya organizado en cuatro componentes: el Header, el Hero, el SearchBar y el PropertyList [01:15]. Cada uno reemplaza el contenido que antes estaba suelto dentro del archivo principal.

Cómo se relacionan el PropertyList y el PropertyCard

El detalle clave está en la jerarquía. El PropertyCard es un hijo del PropertyList, por eso no aparece directamente en el App.jsx [01:45]. Esos dos componentes son con los que trabajamos para conectar las props.

El PropertyList agrupa el título "Alojamientos disponibles" y un listado de tres PropertyCards diseñado como un grid o grilla [03:00]. El problema es evidente: si repites el mismo card, las tres tarjetas muestran exactamente el mismo apartamento.

Y aquí viene lo interesante: no necesitas listar tres veces el mismo apartamento, sino tres apartamentos distintos.

Cómo habilitar un componente para que reciba props

El primer paso es permitir que el PropertyCard reciba contenido. Junto a la definición de la función abres unas llaves y declaras las props que necesitas [05:20].

En este caso el componente recibe cuatro valores:

• La imagen que se muestra en la tarjeta.
• El título, por ejemplo "Apartamento moderno".
• La ubicación, como "Santiago de Chile".
• El precio, que originalmente decía "$75 por noche".

Un detalle útil del editor: las props recién definidas se ven en un color más tenue mientras no las uses. Cuando empiezas a utilizarlas dentro del código, se muestran más brillantes [06:00]. Es una pista visual para saber qué ya conectaste.

¿Por qué mi prop se ve en gris o más tenue en el editor? Porque la declaraste pero todavía no la estás usando dentro del componente. Al utilizarla, el editor la resalta con más brillo.

Por qué aparece un error si el padre no envía la información

Al guardar puede aparecer un error [06:50]. La razón es lógica: aunque el hijo ya recibe las props, todavía no modificaste al padre para que envíe esos datos. Lo único que se renderiza es lo escrito directamente en el código, como el texto "/noche".

La solución es sencilla. Vuelves al PropertyList y modificas cada card con el contenido independiente de cada propiedad.

Cómo pasar props desde el componente padre

En el PropertyList seteas cada valor de forma parecida a un atributo de HTML. Por ejemplo, asignas el título con "Nuevo apartamento" y al guardar aparece tanto en el alt de la imagen como en el título dentro de la card [08:00].

Repites lo mismo con la ubicación, la imagen y el precio para la primera tarjeta. Luego aplicas el proceso a las otras dos para que cada una tenga imágenes y datos distintos [09:30].

Aquí surge un detalle en el precio que vale la pena revisar. La primera tarjeta mostraba el símbolo del dólar junto al "75", mientras las otras dos mostraban directamente "120" y "65". La causa: la primera recibía un string con el símbolo incluido y las otras no.

Cómo estandarizar el precio con un valor numérico

Lo más estándar es que el precio reciba un valor numérico y que el símbolo de moneda viva en un solo lugar del código [10:15].

Para lograrlo:

• Pasas el precio como número puro desde el PropertyList.
• Ubicas el símbolo del dólar dentro del PropertyCard, justo antes de mostrar el precio.
• Así el símbolo queda escrito una sola vez y el valor siempre llega limpio.

Este tipo de inconsistencia es exactamente lo que TypeScript ayuda a prevenir. Si el precio esperara un número y le pasaras un texto, TypeScript marcaría el error de inmediato [09:00]. Es un tema que se aborda más adelante en el curso.

Con esto, el PropertyCard deja de ser una plantilla rígida y se vuelve un componente reutilizable capaz de mostrar N cantidad de propiedades según los datos que reciba.

Aún queda una limitación: agregar cada propiedad manualmente, una por una, no refleja del todo una aplicación real. El siguiente paso es ordenar esos datos en un array para no escribir cada tarjeta a mano.

¿Ya intentaste convertir uno de tus componentes estáticos en uno que reciba props? Cuéntame en los comentarios cómo te fue con la conexión entre padre e hijo.