21.1. Pasando props básicos entre componentes en React

 

Tutorial: Cómo Pasar Props Entre Componentes en React

🎯 Objetivo

Aprender a pasar diferentes tipos de datos como props entre componentes React.

📦 Tipos de Props que Aprenderemos

  1. String (Texto)

  2. Variable

  3. Number (Número)

  4. Array (Lista/Arreglo)

  5. Object (Objeto)







🏗️ Estructura Base

jsx

// App.js - COMPONENTE PADRE

import React from "react";

import Hijo from "./components/Hijo";


function App() {

    // Aquí definimos nuestros datos

    return (

        <div>

            {/* Aquí pasamos props al componente Hijo */}

            <Hijo />

        </div>

    );

}


export default App;

jsx

// Hijo.js - COMPONENTE HIJO

import React from "react";


function Hijo(props) {

    // Aquí recibimos y usamos los props

    return (

        <div>

            {/* Mostramos los datos aquí */}

        </div>

    );

}


export default Hijo;



1️⃣ Pasar un STRING (Texto)

App.js (Padre)

jsx

function App() {

    return (

        <div>

            {/* Pasamos texto directamente */}

            <Hijo mensaje="Hola Mundo" />

            

            {/* Pasamos texto desde variable */}

            <Hijo mensaje={"Bienvenido a React"} />

            

            {/* Texto con variables dentro */}

            <Hijo mensaje={`Hola ${"Usuario"}`} />

        </div>

    );

}

Hijo.js (Hijo)

jsx

function Hijo(props) {

    return (

        <div>

            <h2>Mensaje: {props.mensaje}</h2>

            <p>Recibí un texto/string</p>

        </div>

    );

}


// Resultado: "Mensaje: Hola Mundo"


2️⃣ Pasar una VARIABLE

App.js (Padre)

jsx

function App() {

    // Definimos variables primero

    const nombre = "Ana";

    const apellido = "García";

    const saludo = `Hola ${nombre} ${apellido}`;

    

    return (

        <div>

            {/* Pasamos la variable nombre */}

            <Hijo nombreUsuario={nombre} />

            

            {/* Pasamos la variable saludo (que es un string) */}

            <Hijo saludoCompleto={saludo} />

            

            {/* Pasamos múltiples variables */}

            <Hijo 

                nombre={nombre} 

                apellido={apellido} 

            />

        </div>

    );

}

Hijo.js (Hijo)

jsx

function Hijo(props) {

    return (

        <div>

            <p>Nombre: {props.nombreUsuario}</p>

            <p>Saludo: {props.saludoCompleto}</p>

            <p>Nombre completo: {props.nombre} {props.apellido}</p>

        </div>

    );

}

3️⃣ Pasar un NUMBER (Número Entero)

App.js (Padre)

function App() {

    const edad = 25;

    const precio = 99.99;

    const cantidad = 3;

    

    return (

        <div>

            {/* Número entero directamente */}

            <Hijo numero={42} />

            

            {/* Número desde variable */}

            <Hijo edad={edad} />

            

            {/* Número decimal */}

            <Hijo precio={precio} />

            

            {/* Operación matemática como prop */}

            <Hijo total={cantidad * precio} />

        </div>

    );

}

Hijo.js (Hijo)

jsx

function Hijo(props) {

    return (

        <div>

            <p>Número: {props.numero}</p>

            <p>Edad: {props.edad} años</p>

            <p>Precio: ${props.precio}</p>

            <p>Total: ${props.total}</p>

        </div>

    );

}IMPORTANTE: Los números van entre llaves {}

4️⃣ Pasar un ARRAY (Lista/Arreglo)

App.js (Padre)

function App() {

    // Diferentes tipos de arrays

    const frutas = ["manzana", "banana", "naranja"];

    const numeros = [1, 2, 3, 4, 5];

    const mezclado = ["texto", 123, true, {nombre: "objeto"}];

    

    return (

        <div>

            {/* Array de strings */}

            <Hijo listaFrutas={frutas} />

            {/* Array de números */}

            <Hijo numeros={numeros} />

            {/* Array mixto */}

            <Hijo datos={mezclado} />

            {/* Array directo (inline) */}

            <Hijo colores={["rojo", "verde", "azul"]} />

        </div>

    );}

Hijo.js (Hijo)

function Hijo(props) {

    return (

        <div>

            <h3>Lista de frutas:</h3>

            <ul>

                {/* Mapeamos el array para mostrar cada elemento */}

                {props.listaFrutas.map((fruta, index) => (

                    <li key={index}>{fruta}</li>

                ))}

            </ul>

            

            <h3>Números:</h3>

            <p>{props.numeros.join(", ")}</p>

            

            <h3>Total de elementos:</h3>

            <p>Mi array tiene {props.datos.length} elementos</p>

        </div>    );}

5️⃣ Pasar un OBJECT (Objeto)

App.js (Padre)

jsx

function App() {

    // Objeto con diferentes tipos de datos

    const usuario = {

        nombre: "Carlos",

        edad: 30,

        email: "carlos@ejemplo.com",

        activo: true,

        direccion: {

            calle: "Calle Falsa 123",

            ciudad: "Madrid"

        }

    };

    

    const producto = {

        id: 1,

        nombre: "Laptop",

        precio: 999.99,

        enStock: true

    };

    

    return (

        <div>

            {/* Objeto completo */}

            <Hijo usuario={usuario} />

            

            {/* Objeto directo */}

            <Hijo config={{ tema: "oscuro", idioma: "es" }} />

            

            {/* Múltiples objetos */}

            <Hijo 

                datosUsuario={usuario}

                datosProducto={producto}

            />

        </div>

    );

}

Hijo.js (Hijo)

jsx

function Hijo(props) {

    return (

        <div>

            <h3>Información del Usuario:</h3>

            <p>Nombre: {props.usuario.nombre}</p>

            <p>Edad: {props.usuario.edad}</p>

            <p>Email: {props.usuario.email}</p>

            <p>Activo: {props.usuario.activo ? "Sí" : "No"}</p>

            <p>Dirección: {props.usuario.direccion.calle}, {props.usuario.direccion.ciudad}</p>

            

            <h3>Configuración:</h3>

            <p>Tema: {props.config.tema}</p>

            <p>Idioma: {props.config.idioma}</p>

        </div>

    );

}







🎯 EJEMPLO COMPLETO: Todos los tipos juntos

App.js

jsx

import React from "react";

import MostrarDatos from "./components/MostrarDatos";


function App() {

    // Datos de ejemplo

    const texto = "Hola desde React";

    const numero = 100;

    const lista = ["React", "Vue", "Angular"];

    const objeto = {

        framework: "React",

        version: 18,

        popular: true

    };

    

    return (

        <div style={{ padding: "20px" }}>

            <h1>Ejemplo Completo de Props</h1>

            

            {/* Pasamos todos los tipos de props */}

            <MostrarDatos 

                miTexto={texto}

                miNumero={numero}

                miLista={lista}

                miObjeto={objeto}

                esVisible={true}

            />

        </div>

    );

}


export default App;



MostrarDatos.js

import React from "react";


function MostrarDatos(props) {

    return (

        <div style={{ 

            border: "2px solid #007bff", 

            padding: "15px", 

            margin: "10px",

            borderRadius: "8px"

        }}>

            <h2>Recibí estos datos:</h2>

            

            <div style={{ marginBottom: "10px" }}>

                <strong>Texto:</strong> {props.miTexto}

            </div>

            

            <div style={{ marginBottom: "10px" }}>

                <strong>Número:</strong> {props.miNumero}

            </div>

            

            <div style={{ marginBottom: "10px" }}>

                <strong>Lista:</strong>

                <ul>

                    {props.miLista.map((item, index) => (

                        <li key={index}>{item}</li>

                    ))}

                </ul>

            </div>

            

            <div style={{ marginBottom: "10px" }}>

                <strong>Objeto:</strong>

                <p>Framework: {props.miObjeto.framework}</p>

                <p>Versión: {props.miObjeto.version}</p>

                <p>Popular: {props.miObjeto.popular ? "Sí" : "No"}</p>

            </div>

            

            <div>

                <strong>Visible:</strong> {props.esVisible ? "✅ Mostrando" : "❌ Oculto"}

            </div>

        </div>

    );

}export default MostrarDatos;

🔧 Forma Moderna: Desestructuración

jsx

// En lugar de esto:

function Hijo(props) {

    return <p>{props.nombre}</p>;

}


// Puedes hacer esto (RECOMENDADO):

function Hijo({ nombre, edad, ciudad }) {

    return (

        <div>

            <p>Nombre: {nombre}</p>

            <p>Edad: {edad}</p>

            <p>Ciudad: {ciudad}</p>

        </div>

    );

}


// App.js

<Hijo nombre="Laura" edad={28} ciudad="Barcelona" />

⚠️ Errores Comunes y Soluciones

ERROR 1: Olvidar las llaves en números

jsx

// ❌ INCORRECTO

<Hijo edad=25 />


// ✅ CORRECTO

<Hijo edad={25} />


ERROR 2: Pasar objetos incorrectamente

jsx

// ❌ Esto pasa un string, no un objeto

<Hijo usuario="{nombre: 'Ana'}">


// ✅ CORRECTO

<Hijo usuario={{nombre: 'Ana'}}>

ERROR 3: Intentar modificar props

jsx

// ❌ NO PUEDES modificar props

function Hijo(props) {

    props.nombre = "Nuevo"; // ERROR

    return <p>{props.nombre}</p>;

}

🎯 Ejercicio Práctico: Tarjeta de Perfil

Tu misión:

Crea un componente Perfil que reciba estos props:

  • nombre (string)

  • edad (number)

  • habilidades (array)

  • contacto (object con email y telefono)

  • esPremium (boolean)



App.js debe verse así:

<Perfil

    nombre="María"

    edad={29}

    habilidades={["React", "JavaScript", "CSS"]}

    contacto={{ email: "maria@ejemplo.com", telefono: "123456789" }}

    esPremium={true}

/>

📊 Resumen de Sintaxis

Tipo de Dato

Ejemplo de cómo pasarlo

String

<Componente texto="Hola" />

Variable

<Componente dato={variable} />

Number

<Componente numero={42} />

Array

<Componente lista={[1,2,3]} />

Object

<Componente obj={{clave: 'valor'}} />

Boolean

<Componente activo={true} />

✅ Reglas de Oro

  1. Strings pueden ir sin llaves "texto"

  2. Números, variables, arrays y objetos SIEMPRE con llaves {dato}

  3. Los props son de solo lectura (no los modifiques)

  4. Usa nombres descriptivos para los props

  5. Desestructura los props para código más limpio

🎉 ¡Felicidades!

Ahora sabes pasar cualquier tipo de dato entre componentes en React. Recuerda:

text

PADRE → (pasa props) → HIJO → (usa props) → INTERFAZ

Próximo paso: Aprender sobre estado (state) para manejar datos que cambian dentro de un componente

Comentarios

Publicar un comentario

Entradas más populares de este blog

18-Ciclo de Vida de un Componente React

  Ciclo de Vida de un Componente React Fases del Ciclo de Vida: 1. Montaje (Mounting) El componente se crea y se inserta en el DOM. 2. Actualización (Updating) El componente se re-renderiza debido a cambios en props o estado. 3. Desmontaje (Unmounting) El componente se elimina del DOM. Diagrama Completo del Ciclo de Vida- En Componentes de Clase: class MiComponente extends React . Component {    // 1. CONSTRUCTOR (montaje)    constructor ( props ) {      super ( props );      this . state = { contador : 0 };     console . log ( 'constructor' );    } // 2. getDerivedStateFromProps (montaje/actualización)    static getDerivedStateFromProps ( props , state ) {     console . log ( 'getDerivedStateFromProps' );      return null ; // Retorna nuevo estado o null    } // 3. RENDER (montaje/actualización)    render ()...
Leer más

20. ¿Que son los Props de React?

  Tutorial 20: ¿Qué son los Props de React? 🎯 Objetivo Aprender a pasar información entre componentes usando props en React. 📖 Introducción a los Props ¿Qué son los Props? Los props (propiedades) son la forma que tiene React de pasar información de un componente padre a un componente hijo. Analogía sencilla: Imagina que los props son como parámetros que le pasas a una función, pero en el mundo de los componentes React. 🎭 Ejemplo Visual: Flujo de Props text   ┌─────────────────┐    │     App.js      │   ← Componente PADRE    │  (tiene nombre) │    └────────┬────────┘             │ Pasa el nombre como prop             ▼    ┌─────────────────┐    │   Saludar.js    │   ← Componente HIJO    │  (usa el nombre)...
Leer más

17-Componentes en React-estado

  Componentes en React Concepto Básico Los componentes son los bloques fundamentales de una aplicación en React. Son piezas independientes y reutilizables de código que definen: Cómo debe verse una parte de la UI (estructura HTML) Cómo debe comportarse (lógica y funcionalidad) Analogía Imagina que estás construyendo una casa: Componente = Habitación (cocina, baño, dormitorio) Cada habitación tiene su propio diseño y función Puedes reutilizar el mismo diseño de dormitorio varias veces Juntas todas las habitaciones para formar la casa completa Tipos de Componentes 1. Componentes Funcionales (Recomendados actualmente) javascript // Componente como función function Saludo ( props ) {    return < h1 > Hola , { props . nombre } !</ h1 > ; } // Con arrow function const Boton = ({ texto , onClick }) => {    return < button onClick = { onClick } > { texto } </ button > ; }; 2. Componentes de Clase (Legacy) javascript class Contador...
Leer más