22. Pasando variables y objetos entre componentes por los props

 

22. Pasando variables y objetos entre componentes por los props

En este tutorial aprenderemos a pasar datos entre componentes de React usando props, tanto variables individuales como objetos completos. Esto nos permite manejar grandes cantidades de información de forma organizada y eficiente.

📌 ¿Por qué pasar objetos en lugar de muchas props?

Imagina que tenemos que pasar 10, 20 o 50 propiedades a un componente. Si lo hacemos una por una, el código se volverá gigantesco y difícil de mantener. La solución es agrupar los datos en un objeto y pasarlo como una sola prop.








🧠 Ejemplo inicial: pasando variables individuales

App.js

import React from "react";

import "./App.css";

import Saludar from "./components/Saludar";


function App() {

  const userName = "Agustin Navarro";

  const edad = 26;


  return (

    <div className="App">

      <header className="App-header">

        <Saludar name={userName} edad={edad} />

      </header>

    </div>

  );

}


export default App;

Saludar.js

jsx

import React from "react";


export default function Saludar(props) {

  return (

    <div>

      <h2>

        Hola {props.name}, tienes {props.edad} años.

      </h2>

    </div>

  );

}

✅ Resultado:
Hola Agustin Navarro, tienes 26 años.

🧳 Mejorando con objetos

Si queremos pasar más datos (nombre, edad, color favorito, etc.), es mejor usar un objeto.

App.js (con objeto)

jsx

import React from "react";

import "./App.css";

import Saludar from "./components/Saludar";


function App() {

  const user = {

    nombre: "Agustin Navarro Galdon",

    edad: 26,

    color: "Azul"

  };


  return (

    <div className="App">

      <header className="App-header">

        <Saludar userInfo={user} />

      </header>

    </div>

  );

}


export default App;



📥 Recibiendo el objeto en el componente hijo

Saludar.js

jsx

import React from "react";


export default function Saludar(props) {

  // Accedemos a las propiedades del objeto

  console.log(props.userInfo.nombre); // Agustin Navarro Galdon

  console.log(props.userInfo.edad);   // 26

  console.log(props.userInfo.color);  // Azul


  return (

    <div>

      <p>

        Hola {props.userInfo.nombre}, tienes {props.userInfo.edad} años.

        Tu color favorito es el {props.userInfo.color}.

      </p>

    </div>

  );

}

✅ Resultado:
Hola Agustin Navarro Galdon, tienes 26 años. Tu color favorito es el Azul.

🧾 Resumen de pasos

  1. Crear un objeto con los datos que quieres pasar.

  2. Pasar el objeto como prop al componente hijo.

  3. Acceder a las propiedades del objeto desde props.nombreDelObjeto.propiedad.

🚀 Ventajas de usar objetos

  • ✅ Código más limpio.

  • ✅ Fácil de escalar (puedes agregar más propiedades sin modificar la llamada al componente).

  • ✅ Mantenible y reutilizable.

🧩 ¿Y si el objeto es muy grande?

Si el objeto tiene muchas propiedades, acceder a cada una con props.userInfo.propiedad puede ser tedioso. En los siguientes tutoriales veremos cómo usar destructuring para simplificar esto.

Ejemplo rápido de destructuring dentro del componente:

jsx

export default function Saludar({ userInfo }) {

  const { nombre, edad, color } = userInfo;

  return (

    <p>Hola {nombre}, tienes {edad} años.</p>

  );

}

📌 Conclusión

Hemos aprendido a:

  • ✅ Pasar variables individuales por props.

  • ✅ Pasar objetos completos para agrupar datos.

  • ✅ Acceder a las propiedades de los objetos dentro del componente hijo.

Esto nos permite manejar información de manera más eficiente y prepararnos para componentes más complejos.

👉 En el siguiente video veremos cómo usar destructuring para hacer nuestro código aún más limpio y legible

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