Cómo pasar props de padre a hijo en React

Cuando construyes una aplicación real con React, cada tarjeta necesita mostrar información distinta: un título, una ubicación, una imagen y un precio diferentes. Aquí es donde entran las props en React, la forma que tiene esta librería de comunicar datos entre componentes y evitar que repitas el mismo contenido una y otra vez.

Si vienes de HTML, las props te van a resultar familiares, pero con una diferencia clave que cambia todo lo que puedes hacer con ellas.

Qué son las props y por qué se parecen a los atributos de HTML

Las props son el mecanismo que usa React para pasar información de un componente padre a un componente hijo [00:07]. Estructuralmente se parecen a los atributos de HTML, pero con una ventaja enorme.

¿Qué son las props en React? Son valores que un componente padre envía a un componente hijo para personalizar su contenido. A diferencia de los atributos HTML, no solo aceptan texto, también objetos, arrays y funciones.

Esa es la parte interesante: mientras un atributo de HTML solo maneja texto, con props puedes pasar cualquier valor de JavaScript [00:31]. Eso las vuelve mucho más poderosas para armar interfaces dinámicas.

Antes de conectar todo, conviene tener la estructura ordenada. En el ejercicio previo migramos el contenido de App.jsx a componentes separados: Header, Hero, SearchBar y PropertyList [00:56]. Cada uno vive por su cuenta y se importa donde antes estaba el contenido directo.

Cómo se relacionan PropertyList y PropertyCard

Dentro de la carpeta components aparecen archivos como Header, Hero, PropertyCard, PropertyList y SearchBar [01:29]. El detalle importante es que PropertyCard es hijo de PropertyList, por eso no lo ves listado dentro de App.jsx [01:38].

Esos dos componentes son los protagonistas: vamos a conectar las props para pasar la información desde PropertyList hacia cada PropertyCard.

El PropertyList agrupa todo el bloque de tarjetas. Tiene un título, "Available Accommodations", y una lista de tres PropertyCards [02:35]. Como ya está diseñado como grid, si agregas una nueva tarjeta aparece automáticamente abajo a la izquierda [02:44].

Por qué todas las tarjetas muestran el mismo contenido sin props

El problema salta a la vista rápido. Sin props, la misma tarjeta se repite tres veces con contenido idéntico [03:39]. En una aplicación real no necesitas listar el mismo departamento tres veces, necesitas mostrar tres departamentos distintos [03:07].

La estructura de cada PropertyCard incluye cuatro datos:

• Una imagen que representa la propiedad.
• Un título, por ejemplo "Modern Apartment".
• Una ubicación, como "Santiago, Chile".
• Un precio, que en el ejemplo es $75 por noche.

Si cambias el título a "New" y guardas, el cambio se aplica a todas las tarjetas porque es la misma tarjeta repitiéndose [03:45]. Ahí queda claro por qué necesitas props para independizar cada una.

Cómo configurar un componente para recibir props

El primer paso es habilitar al componente para que reciba contenido. Vas a donde se define la función del componente y abres unas llaves, porque va a recibir varias props [04:32].

Dependiendo del editor que uses puede sugerirte opciones. Con Windsurf aparecen recomendaciones bastante acertadas: title, location, price e image [04:46]. Aceptas con Tab y el editor empieza a sugerir dónde colocar cada una.

¿Cómo sé si una prop está definida pero sin usar? El editor la muestra en un color más apagado. Cuando esas cuatro props se ven más tenues, significa que ya las declaraste pero todavía no las estás utilizando dentro del componente.

Ese detalle visual es una guía práctica: en cuanto usas cada prop, se ilumina automáticamente [05:04]. El título va, por ejemplo, en el alt text de la imagen y en el cuerpo de la tarjeta [06:16].

Por qué aparece un error al guardar antes de enviar los datos

Si guardas en este punto, el editor detecta un error. El componente ya recibe las props, pero todavía no modificamos el padre para enviar esa información [06:44]. Lo único que renderiza es lo escrito directamente, como el texto "/night" del precio.

La solución es sencilla: vas al PropertyList y modificas cada tarjeta con contenido específico [06:58].

Cómo pasar props desde PropertyList a cada PropertyCard

Aquí es donde se nota el parecido con los atributos de HTML. Estableces el título directamente en la tarjeta y escribes, por ejemplo, "New apartment" [07:33]. Al guardar, el título aparece renderizado tal cual, incluso en el alt de la imagen.

Luego agregas la ubicación aceptando las recomendaciones del editor, y quedas con "Santiago, Chile" [08:05]. Para el precio pasa algo revelador.

Mira la diferencia entre las tres tarjetas:

• La primera recibe un string con el símbolo y muestra "$75" [09:47].
• La segunda muestra simplemente 120 [09:40].
• La tercera muestra 65 [09:40].

¿Por qué esa inconsistencia? Porque la primera recibe el símbolo dentro del texto y las otras no. La forma más estándar de resolverlo es que el precio reciba directamente un valor numérico y que el símbolo de dólar se inserte una sola vez en el código, justo antes de mostrar el precio dentro de la tarjeta [10:24].

¿Por qué conviene pasar el precio como número y no como texto? Porque un número te da control y consistencia. Con TypeScript incluso podrías exigir que el precio solo acepte un valor numérico y no un string, evitando errores al pasar los datos [09:20].

Ese punto conecta con algo que verás más adelante en el curso: al trabajar con TypeScript, ese valor no aceptaría texto, tendría que ser un número, y el editor marcaría el error si intentaras pasar un string [09:20].

Qué logras con un componente PropertyCard reutilizable

Con todo conectado, tu PropertyCard ya no repite contenido: muestra propiedades distintas según los datos que recibe [10:46]. Se volvió un componente reutilizable y flexible.

Aun así, todavía no cumple del todo con lo que sería una aplicación real, porque tendrías que agregar los detalles de cada propiedad manualmente [10:33]. Ese es el siguiente reto: organizar los datos en un array para no ingresar cada tarjeta a mano [10:58].

¿Ya intentaste convertir alguno de tus componentes en algo reutilizable con props? Cuéntame en los comentarios cómo te fue con tu primera tarjeta dinámica.