6.6-21-Pasando props básicos entre componentes

Pasando Props entre Componentes en React

Conceptos Claros y Estructura Mejorada

1. Creación del Componente Saludar

// components/Saludar.js
import React from 'react';

export default function Saludar(props) {
  return (
    <div>
      <h1>Hola {props.nombre}</h1>
      <h2>Edad: {props.edad} años</h2>
    </div>
  );
}// App.js

import Saludar from './components/Saludar';

function App() {
  return (
    <div>
      <Saludar nombre="Agustín Navarro" edad={26} />
      <Saludar nombre="Paco" edad={31} />
    </div>
  );
}

---

Explicación Mejorada

¿Qué son los Props?

• Son datos pasados de un componente padre a un hijo (como parámetros en una función).

• Permiten crear componentes dinámicos y reutilizables.

Sintaxis Clave

1. Pasar Props:

   jsx

   Copy

   Download

   <Componente prop1={valor1} prop2={valor2} />

2. Recibir Props:

   jsx

   Copy

   Download

   function Componente(props) {
     return <div>{props.prop1}</div>;
   }

Ejemplo con Tipos de Datos

Tipo de Dato	Ejemplo
String	<Saludar nombre="Agustín" />
Number	<Saludar edad={26} />
Array	<Saludar hobbies={['fútbol', 'música']} />
Object	<Saludar usuario={{nombre: 'Ana', edad: 30}} />

---

Errores Comunes y Soluciones

1. Props no definidos

❌ Problema: Si un prop no se pasa, muestra undefined.
✅ Solución: Usar valores por defecto:

jsx

Copy

Download

function Saludar({ nombre = 'Invitado', edad = 18 }) {
  return <h1>Hola {nombre}, edad: {edad}</h1>;
}

2. Olvidar llaves {} para variables

❌ Error:

jsx

Copy

Download

<h1>Hola props.nombre</h1> // Muestra literal "props.nombre"

✅ Corrección:

jsx

Copy

Download

<h1>Hola {props.nombre}</h1>

---

Mejores Prácticas

1. Destructuring Props (Recomendado):

   jsx

   Copy

   Download

   function Saludar({ nombre, edad }) {
     return <h1>Hola {nombre}, {edad} años</h1>;
   }

2. PropTypes (Para validar tipos):

   jsx

   Copy

   Download

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

3. Componentes Puros:
   Evita modificar los props directamente. Son inmutables.

---

Ejemplo Avanzado: Pasar Funciones

jsx-Pasar Funciones

Copy

Download

// App.js
function App() {
  const saludar = (nombre) => alert(`Hola ${nombre}!`);

  return (
    <Saludar 
      nombre="Agustín" 
      accion={saludar} 
    />
  );
}

// Saludar.js
function Saludar({ nombre, accion }) {
  return (
    <button onClick={() => accion(nombre)}>
      Saludar a {nombre}
    </button>
  );
}

---

Conclusión

• Props = Comunicación entre componentes.

• Dinamismo = Componentes reutilizables.

• Tipado = Usa PropTypes para evitar errores.

Documentación Oficial: React Props

Con esta guía, dominarás el flujo de datos en React de manera profesional. ¡A impleme