6.8-23-pasando funciones a nuestro componente

Pasando Funciones como Props en React

Introducción Clara y Motivadora

En React, los componentes no solo pueden recibir datos a través de props, ¡también pueden recibir funciones! Esto nos permite:

• ✅ Crear componentes interactivos (como botones que ejecutan acciones)

• ✅ Comunicar componentes hijos con padres

• ✅ Construir aplicaciones más dinámicas y reactivas

1. Pasando Funciones Básicas

Ejemplo Simple: Botón con Alerta

jsx-Funciones Básicas

Copy

Download

// Componente Padre (App.js)
function App() {
  const saludar = () => {
    alert("¡Hola desde el componente padre!");
  };

  return <BotonSaludar onClick={saludar} />;
}

// Componente Hijo (BotonSaludar.js)
function BotonSaludar(props) {
  return (
    <button onClick={props.onClick}>
      Saludar
    </button>
  );
}

🔹 Key Points:

• La función se define en el padre y se pasa como prop (onClick)

• El hijo ejecuta la función cuando ocurre un evento (click)

Ejemplo Avanzado: Pasar Funciones

jsx- Pasar Funciones

// 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>
  );
}

2. Pasando Parámetros a Funciones

Ejemplo Avanzado: Personalizando el Saludo

jsx-Pasando Parámetros a Funciones

// App.js
function App() {
  const usuario = {
    nombre: "Agustín Navarro",
    edad: 26
  };
  const saludarUsuario = (nombre) => {
    console.log(`Hola ${nombre}`);
  };
  return <Saludador user={usuario} onSaludar={saludarUsuario} />;
}
// Saludador.js
function Saludador({ user, onSaludar }) {
  return (
    <div>
      <button onClick={() => onSaludar(user.nombre)}>
        Saludar a {user.nombre}
      </button>
    </div>
  );
}

⚠️ ¡Cuidado con este error común!

jsx

Copy

Download

// INCORRECTO (se ejecuta inmediatamente)
<button onClick={onSaludar(user.nombre)}>

// CORRECTO (espera al click)
<button onClick={() => onSaludar(user.nombre)}>

3. Comunicación Bidireccional

Flujo Completo de Datos

jsx-Comunicación Bidireccional

// App.js
function App() {
  const [contador, setContador] = useState(0);

  const manejarClick = (incremento) => {
    setContador(contador + incremento);
  };
  return (
    <div>
      <p>Contador: {contador}</p>
      <Controles 
        onIncrementar={() => manejarClick(1)}
        onDecrementar={() => manejarClick(-1)}
      />
    </div>
  );
}
// Controles.js
function Controles({ onIncrementar, onDecrementar }) {
  return (
    <div>
      <button onClick={onIncrementar}>+</button>
      <button onClick={onDecrementar}>-</button>
    </div>
  );
}

Tabla Comparativa: Patrones para Funciones como Props

Patrón	Ejemplo	Uso Recomendado
Función Simple	<Componente onClick={handleClick}	Eventos básicos
Función con Parámetros	onClick={() => action(param)}	Cuando necesitas pasar datos
Callback Complejo	onComplete={(data) => process(data)}	Comunicación padre-hijo compleja

Buenas Prácticas

1. Nombrado descriptivo: Usa prefijos como on o handle para funciones (onClick, onSubmit)

2. Documentación: Comenta las props de funciones en PropTypes:

   jsx

   Copy

   Download

   BotonSaludar.propTypes = {
     onClick: PropTypes.func.isRequired
   };

3. Optimización: Para evitar recrear funciones en cada render, usa useCallback:

   jsx

   Copy

   Download

   const saludar = useCallback(() => {
     alert("Hola optimizado!");
   }, []);

Ejemplo del Mundo Real: Formulario

jsx-formulario

Copy

Download

// App.js
function App() {
  const [formData, setFormData] = useState({});
  const handleSubmit = (data) => {
    console.log("Datos enviados:", data);
    setFormData(data);
  };
  return (
    <div>
      <FormularioContacto onSubmit={handleSubmit} />
      <DatosEnviados data={formData} />
    </div>
  );
}// FormularioContacto.js
function FormularioContacto({ onSubmit }) {
  const [input, setInput] = useState("");

  const enviar = (e) => {
    e.preventDefault();
    onSubmit({ email: input });
  };
  return (
    <form onSubmit={enviar}>
      <input 
        value={input}
        onChange={(e) => setInput(e.target.value)}
      />
      <button type="submit">Enviar</button>
    </form>
  );
}

Ejemplo de cómo podría ser DatosEnviados:

jsx

function DatosEnviados({ data }) {
  return (
    <div>
      <h3>Datos enviados:</h3>
      {data.email && <p>Email: {data.email}</p>}
      {!data.email && <p>No se han enviado datos aún</p>}
    </div>
  );
}

Explicación del Componente FormularioContacto

Este componente es un formulario React que captura y envía un dato (en este caso, un email). Vamos a desglosarlo parte por parte:

1. Definición del Componente

javascript

function FormularioContacto({ onSubmit }) {

• Es un componente funcional que recibe una prop llamada onSubmit

• onSubmit es una función que el componente padre debe proporcionar para manejar los datos del formulario

2. Estado del Componente

javascript

const [input, setInput] = useState("");

• Usa el hook useState para manejar el estado del input

• input almacena el valor actual del campo de texto

• setInput es la función para actualizar ese valor

3. Función enviar

javascript

const enviar = (e) => {
  e.preventDefault();
  onSubmit({ email: input });
};

• Se ejecuta cuando se envía el formulario

• e.preventDefault() evita el comportamiento por defecto del formulario (recargar la página)

• Llama a la función onSubmit pasada como prop, enviándole un objeto con el email capturado

4. Renderizado del Formulario

javascript

return (
  <form onSubmit={enviar}>
    <input 
      value={input}
      onChange={(e) => setInput(e.target.value)}
    />
    <button type="submit">Enviar</button>
  </form>
);

Elementos:

1. <form onSubmit={enviar}>:

   • Formulario que ejecuta la función enviar al hacer submit

2. <input>:

   • Campo de texto controlado por React

   • value={input}: Muestra el valor actual del estado

   • onChange={(e) => setInput(e.target.value)}: Actualiza el estado con cada cambio en el input

3. <button type="submit">:

   • Botón que envía el formulario

Flujo de Funcionamiento

1. El usuario escribe en el input → dispara onChange → actualiza input

2. Al hacer click en Enviar:

   • Previene recarga de página

   • Llama a onSubmit con { email: valorDelInput }

   • El componente padre recibe estos datos

Características Importantes

• Componente controlado: El input está completamente controlado por React a través del estado

• Reutilizable: Puede usarse en cualquier parte de la aplicación mientras se le pase la prop onSubmit

• Simple: Maneja solo un campo (email), pero podría extenderse para más campos

Explicación de onChange={(e) => setInput(e.target.value)}

Esta línea de código es fundamental para manejar inputs en React. Vamos a descomponerla:

¿Qué hace exactamente?

Es un manejador de eventos que se ejecuta cada vez que el valor del input cambia (cuando el usuario escribe o borra).

Partes de la expresión:

1. onChange={...}:

   • Es el evento que se dispara cuando el contenido del input cambia

   • Similar al oninput en JavaScript vanilla

2. (e) => ...:

   • Una función flecha (arrow function) que recibe el evento e como parámetro

   • e es el objeto evento de React que contiene información sobre lo que ocurrió

3. e.target:

   • Hace referencia al elemento HTML que disparó el evento (en este caso, el input)

4. e.target.value:

   • Contiene el valor actual del input (lo que el usuario ha escrito)

5. setInput(...):

   • Es la función de actualización de estado que nos proporciona useState

   • Actualiza el estado input con el nuevo valor

¿Cómo funciona el flujo completo?

1. El usuario escribe una letra en el input

2. El navegador detecta el cambio y dispara el evento onChange

3. React ejecuta nuestra función (e) => setInput(e.target.value)

4. La función toma el valor actual del input (e.target.value)

5. Actualiza el estado de React con setInput()

6. React re-renderiza el componente con el nuevo valor

¿Por qué es importante?

• Mantiene sincronizado el estado: Lo que ves en pantalla siempre coincide con el estado de React

• Hace el input controlado: React tiene el control completo sobre el valor del input

• Permite validaciones: Puedes modificar el valor antes de guardarlo en el estado

Alternativa más legible

Podríamos separarlo en una función aparte para mayor claridad:

jsx

const handleChange = (e) => {
  setInput(e.target.value);
};

// Y en el input:
<input value={input} onChange={handleChange} />

Esta versión hace exactamente lo mismo pero puede ser más fácil de entender para algunos desarrolladores.

Conclusión

• Las funciones como props permiten una comunicación poderosa entre componentes

• Pueden recibir parámetros para personalizar su comportamiento

• Son esenciales para crear componentes interactivos y reutilizables

Próximos pasos: En el siguiente post exploraremos cómo manejar props opcionales y valores por defecto.

Flujo General

1. App es el componente principal que mantiene el estado formData

2. FormularioContacto es un formulario que recoge un email y lo envía al componente padre (App)

3. Cuando se envía el formulario, App actualiza su estado formData con los datos recibidos

4. App pasa estos datos al componente DatosEnviados

Explicación de <DatosEnviados data={formData} />

Esta línea hace lo siguiente:

1. Renderiza el componente DatosEnviados: Muestra este componente en la interfaz.

2. Pasa los datos como prop: Le envía los datos del formulario (almacenados en formData) al componente DatosEnviados a través de la prop llamada data.

3. Comunicación entre componentes: Esta es la forma en que el componente padre (App) comparte información con el componente hijo (DatosEnviados).

4. Reactividad: Cada vez que formData se actualiza (cuando se envía el formulario), React automáticamente volverá a renderizar DatosEnviados con los nuevos datos.

¿Qué haría DatosEnviados?

Aunque no vemos su implementación, podemos deducir que:

• Recibiría los datos a través de props: function DatosEnviados({ data }) {...}

• Mostraría los datos enviados por el usuario, probablemente en un formato legible

• Podría mostrar un mensaje de confirmación o procesar los datos de alguna manera

Ejemplo de cómo podría ser DatosEnviados:

jsx

function DatosEnviados({ data }) {
  return (
    <div>
      <h3>Datos enviados:</h3>
      {data.email && <p>Email: {data.email}</p>}
      {!data.email && <p>No se han enviado datos aún</p>}
    </div>
  );
}

Esta implementación mostraría el email enviado o un mensaje indicando que no hay datos si el formulario no se ha enviado aún.

Ya sabemos mandar variables y objetos entre componentes pero vamos a ver cómo mandar una función. Por ejemplo tenemos aquí nuestro componentes a lugar Mareque renderiza un texto pero ahora yo quiero que rendiste un botón por ejemplo botón un botón button  no me pone hay un botón que diga por ejemplo saludar.Vale ya la tenemos un botón que dice saludar. 

330

Yo quiero que cuando pinche me salga por ejemplo una alerta o un controle.log que diga Hola agustín. Entonces yo aquí meto una  función que sea baja const saludar  una función del tipo flecha que siempre lo que hace es una alerta que diga Hola Agustín.

053

Y ahora cuando este botón haga un click onClick y ejecute va ejecutar saluda.Perfecto entonces si yo la cojo y lo voy a saludar me dice Hola Agustín correctamente.

Voy a poner un control mejor consolé.log guardas mientras conduce a saludar.Hola Agustín.

103

Pero estamos en las mismas. que remos  que la función saludar llegue de app.js  y esa función.

Pues ejecuté algo va.Por ejemplo voy a poner aquí la función saludar aquí con saludar saludar saludarFM. para cambiar el nombre. Creamos una función del tipo flecha y esta función simplemente es la voy mandar por Plops

145

Igual que hemos hecho con nuestro objeto vale aquí saludarFN igual Si al aquí le damos igual y no ponemos sólo la F lo dejamos igual.

201

Y ahora nuestro saludad quitamos esa función y quitamos de un clic perfecto. Y si yo hago consolé punto lo de prog podemos observar que nos llega nuestro objeto.Uso de info y luego nos llega una función que se llama saludar FN vale

217

ahora pues bueno yo la cojo me voy al botón hago un clic igual y aquí pongo props punto saludar saluda a saludar F y luego en app.js. Este sólo va decir por ejemplo consolé.log no va a recibir el nombre del usuario. Y así vemos como mandar información.

245

Bueno esto primero de consolé.log hola Luego veremos cómo recibieron sus props entonces por este saludar dice hola  y yo vengo aquí

a onClick  props.saludarFN y ejecutarã la función cuando haga click a simple vista parece

que vaya a funcionar.

309

Yo guardo un vale de cargo y lo he saludado y funciona correctamente.

316

Vale funcionaba correctamente pero ahora queremos pasarle por propiedades a saludar.FN entonces  queremos pasarle el name y que remos que cuando. Hola bueno cuando le doy al botón de saludar diga hola más name vale aquí un espacio para decir hola y el nombre

del usuario lo cual si yo dejo tal cual me dice sin dudar Objet obvie esto no está bien.

346

Entonces ahora tenemos que pasarle por propiedades a la función saludar el nombre del usuario.

Entonces abrimos paréntesis para ejecutar la función dispersamos Prox punto User Info punto nombre vale

lo habíamos dicho no verdad uso info no perfecto

409

 pero aquí va a pasar algo muy curioso.

Yo guardo y podemos observar que se me está ejecutando mi botón aunque yo le dé clic ahora no funciona

y cuando yo recargo la aplicación se ejecuta.

Vale por qué.

Porque le hemos puesto los paréntesis aquí hemos puesto aquí unos paréntesis estos paréntesis lo que

indica es que cuando cargue cuando cuando llegues aquí ejecuta esta función.

Si yo guardo de esa manera Mele ustedes ejecutando.

436

Entonces cómo hay que decirle a un click que se espere a que haga clic para ejecutar esta función. Pues simplemente hay que hacerlo en función de tipo flecha anónima, así que aquí aquí delante vale ponemos paréntesis función tipo flecha y ahora ya no se ejecuta.

veis está esperando a que se haga on click a que se haga clic en el botón para ejecutar esta función.

Vale entonces ahora lo voy a saludar y me dice Hola Agustín Navarro Galdón 

qué es el nombre que  le estamos pasando 

 y la función que le estamos pagando 

entonces 

517

qué estamos haciendo.

Estamos mandando la función al componente hijo y la estamos ejecutando y le estamos devolviendo al componente padre el nombre del usuario y el componente padre es el que se está encargando de imprimir ese nombre de usuario en la consola lo cual estamos tanto mandando información al componente hijo como el hijo le está devolviendo la información que necesita al componente padre con esto habíamos aprendido a pasar funciones entre componentes y hemos aprendido cómo podemos pasar valores al componente hijo y cómo el hijo puede devolverle dichos valores al componente padre.

Entonces en el siguiente vídeo vamos a ver qué pasaría si a mí me llega el nombre del usuario vale por props un defining y yo no quiero que me salga un delfín porque igual me llega así no existe y le doy aquí y me pone un defined.

Vamos a ver cómo validar esto y cómo tener propiedades por defecto en caso de que el usuario que esté

programando no nos mande la propiedad correctamente vale pero eso lo vamos a ver en el siguiente vídeo

así que la dejamos aquí este vídeo y nos vemos en el siguiente.