6.15-21. Props para objetos-22-pasando varaibles y objetos

  Props para Objetos en React: Simplificando el Paso de Datos

En React, podemos pasar propiedades (props) de forma más eficiente usando objetos, lo que nos permite acceder directamente a las propiedades que necesitamos sin tener que definirlas una por una.

🔹 Pasando Props como Objetos

En lugar de pasar cada prop individualmente:

jsx

<Usuario nombre="Fran" edad={21} />

Podemos resumirlo en un objeto:

jsx

<Usuario usuario={{ nombre: "Fran", edad: 21 }} />

Y acceder directamente a las propiedades con llaves {}:

jsx

function Usuario({ usuario }) {
  return (
    <div>
      <h1>{usuario.nombre}</h1>
      <p>Edad: {usuario.edad} ❤️</p>
    </div>
  );
}

🔹 Objetos Anidados

Si tenemos datos más complejos, como una dirección con varias propiedades, podemos pasarlos como un objeto anidado:

jsx

<Usuario 
  usuario={{
    nombre: "Frank",
    edad: 21,
    direccion: {
      calle: "Av. San Martín",
      ciudad: "Lima",
      pais: "Perú"
    }
  }}
/>

Y acceder a ellos de manera jerárquica:

jsx

<p>📍 {usuario.direccion.ciudad}, {usuario.direccion.pais}</p>

🔹 Ventajas de Usar Props con Objetos

✅ Menos repetición de código
✅ Estructura más clara y organizada
✅ Fácil acceso a propiedades anidadas

📌 Ejemplo Completo

jsx

function Usuario({ usuario }) {
  console.log(usuario); // Ver estructura en consola
  return (
    <div>
      <h1>👋 {usuario.nombre}</h1>
      <p>Edad: {usuario.edad} años</p>
      <p>
        Dirección: {usuario.direccion.calle}, {usuario.direccion.ciudad}
      </p>
    </div>
  );
}

💡 Tip: Usa console.log(props) para depurar y ver qué datos estás recibiendo.

---

¿Prefieres pasar props individuales o usar objetos? ¡Déjalo en los comentarios! 

Variables y Objetos como Props en React

Introducción Clara y Concisa

En React, los props permiten comunicar datos entre componentes. Cuando necesitamos pasar múltiples valores, enviarlos individualmente puede volverse engorroso. Aquí aprenderemos a:

• ✅ Pasar variables como props

• ✅ Usar objetos para agrupar múltiples props

• ✅ Acceder eficientemente a los datos recibidos

1. Pasando Variables como Props

Ejemplo Básico

jsx-cadena-entero

// En el componente padre (App.js)
function App() {
  const userName = "Agustín Navarro";
  const age = 26;
  return (
    <Saludar 
      nombre={userName} 
      edad={age} 
    />
  );
}
// En el componente hijo (Saludar.js)
function Saludar(props) {
  return (
    <div>
      <h1>Hola {props.nombre}</h1>
      <p>Edad: {props.edad} años</p>
    </div>
  );}

🔹 Problema: Si tenemos muchos props, el código se vuelve difícil de mantener.

2. Pasando Objetos como Props (Solución Óptima)

Ejemplo Mejorado

jsx-Pasando Objetos como Props

Copy

Download

// En App.js
function App() {
  const user = {
    nombre: "Agustín Navarro",
    edad: 26,
    colorFavorito: "azul"
  };

  return <Saludar userInfo={user} />;
}

// En Saludar.js
function Saludar(props) {
  return (
    <div>
      <h2>Hola {props.userInfo.nombre}</h2>
      <p>Edad: {props.userInfo.edad} años</p>
      <p>Color favorito: {props.userInfo.colorFavorito}</p>
    </div>
  );
}

📌 Ventajas:

• Código más organizado

• Fácil escalabilidad (puedes añadir más propiedades al objeto)

• Mejor legibilidad

3. Destructuring para Mayor Claridad

Mejoremos el componente hijo con destructuring:

jsx

Copy

Download

function Saludar({ userInfo }) {
  const { nombre, edad, colorFavorito } = userInfo;
  
  return (
    <div>
      <h2>Hola {nombre}</h2>
      <p>Tiene {edad} años</p>
      <p>Su color favorito es el {colorFavorito}</p>
    </div>
  );
}

🌟 Beneficios:

• Elimina la repetición de props.userInfo

• Código más limpio y mantenible

• Fácil identificación de las props usadas

4. Tabla Comparativa: Enfoques para Pasar Props

Método	Ejemplo	¿Cuándo Usarlo?
Props Individuales	<Saludar nombre="Ana" edad={25} />	Para 2-3 props simples
Objeto de Props	<Saludar userInfo={userData} />	Cuando hay múltiples props relacionados
Destructuring	const { nombre, edad } = props;	Siempre que sea posible para mejorar legibilidad

5. Consejos Profesionales

1. Nombrado consistente: Usa nombres descriptivos (userData en lugar de data).

2. Default Props: Proporciona valores por defecto:

   jsx

   Copy

   Download

   Saludar.defaultProps = {
     userInfo: {
       nombre: "Invitado",
       edad: 18,
       colorFavorito: "negro"
     }
   };

3. PropTypes: Valida los tipos de datos:

   jsx

   Copy

   Download

   import PropTypes from 'prop-types';
   
   Saludar.propTypes = {
     userInfo: PropTypes.shape({
       nombre: PropTypes.string.isRequired,
       edad: PropTypes.number,
       colorFavorito: PropTypes.string
     })
   };

Conclusión

• Para pocos datos: Props individuales son suficientes

• Para datos complejos: Usa objetos y destructuring

• Para código profesional: Implementa PropTypes y defaultProps