23. Pasando funciones entre componente por los props-bueno

 

Pasando funciones entre componentes por props en React

📚 Introducción

En React, no solo podemos pasar datos (variables, objetos) entre componentes, sino también funciones. Esto permite que componentes hijos ejecuten lógica definida en el componente padre, facilitando la comunicación bidireccional.

---

🎯 Objetivo

Aprender a pasar funciones como props entre componentes y cómo el componente hijo puede ejecutarlas devolviendo datos al componente padre.

---

📦 Estructura del proyecto

text

App.js (Componente padre)

└── Saludar.js (Componente hijo)

---

🔧 Paso 1: Componente hijo inicial (versión independiente)

Saludar.js (versión inicial):

import React from "react";

export default function Saludar(props) {

    const saludar = () => {

        alert("Hola Agustin");

    };

    return (

        <div>

            <button onClick={saludar}>Saludar</button>

        </div>

    );

}

Problema: El componente es independiente y no recibe funciones desde fuera.

🔧 Paso 2: Preparar el componente padre (App.js)

App.js:

function App() {

    const user = {

        nombre: "Agustin Navarro Galdon",

        edad: 26,

        color: "Azul"

    };

    const saludarFn = () => {

        console.log("Hola");

    };

    return (

        <div className="App">

            <header className="App-header">

                <img src={logo} className="App-logo" alt="logo" />

                <Saludar userInfo={user} saludarFn={saludarFn} />

            </header>

        </div>

    );}export default App;

---

🔧 Paso 3: Recibir props en el componente hijo

Saludar.js (modificado):

jsx

import React from "react";

export default function Saludar(props) {

    console.log(props); // Verificamos qué llega por props

    return (

        <div>

            <button onClick={props.saludarFn}>Saludar</button>

        </div>

    );

}

Resultado en consola:

text

{

    userInfo: {nombre: "Agustin Navarro Galdon", edad: 26, color: "Azul"},

    saludarFn: () => { console.log("Hola"); }

}

---

🔧 Paso 4: Ejecutar la función recibida por props

Cuando hacemos clic en el botón, ejecuta la función saludarFn del padre:

jsx

<button onClick={props.saludarFn}>Saludar</button>

---

🔧 Paso 5: Mejorar la función para recibir parámetros

App.js (función modificada):

jsx

const saludarFn = (name) => {

    console.log("Hola " + name);

};

---

🔧 Paso 6: Pasar datos del hijo al padre (ERROR COMÚN)

❌ FORMA INCORRECTA:

jsx

<button onClick={props.saludarFn(props.userInfo.nombre)}>Saludar</button>

Problema: Los paréntesis () ejecutan la función inmediatamente al renderizar, no al hacer clic.

---

🔧 Paso 7: Solución correcta - Función flecha anónima

✅ FORMA CORRECTA:

jsx

<button onClick={() => props.saludarFn(props.userInfo.nombre)}>

    Saludar

</button>

Explicación: La función flecha anónima () => {...} crea una nueva función que se ejecutará solo cuando ocurra el clic.

---

🔧 Paso 8: Código final funcionando

App.js:

jsx

function App() {

    const user = {

        nombre: "Agustin Navarro Galdon",

        edad: 26,

        color: "Azul"

    };

    const saludarFn = (name) => {

        console.log("Hola " + name);

    };

    return (

        <div className="App">

            <header className="App-header">

                <img src={logo} className="App-logo" alt="logo" />

                <Saludar userInfo={user} saludarFn={saludarFn} />

            </header>

        </div>

    );

}

Saludar.js:

jsx

import React from "react";

export default function Saludar(props) {

    return (

        <div>

            <button onClick={() => props.saludarFn(props.userInfo.nombre)}>

                Saludar

            </button>

        </div>

    );

}

---

📊 Flujo de comunicación

1. Padre → Hijo:

• El padre pasa userInfo (datos) y saludarFn (función) al hijo

2. Hijo → Padre:

• El hijo ejecuta saludarFn con el parámetro props.userInfo.nombre

• El padre recibe el nombre y lo imprime en consola

---

⚠️ Errores comunes y soluciones

Error	Causa	Solución
Función se ejecuta al renderizar	Usar props.funcion(parametro) directamente	Envolver en función flecha: () => props.funcion(parametro)
undefined en parámetros	Propiedad no existe o se escribe mal	Verificar nombres de props y usar console.log(props)
Función no definida	No se pasó la función como prop	Asegurar que el padre pasa la función correctamente

---

💡 Buenas prácticas

1. Nomenclatura clara: Usar nombres descriptivos como onSaludar, handleClick

2. Validación: Verificar que las funciones existen antes de ejecutarlas

3. Documentación: Comentar qué parámetros espera la función

4. Manejo de errores: Considerar casos donde props puedan ser undefined

---

🎯 Resumen

• ✅ Pasamos funciones como props igual que cualquier dato

• ✅ El hijo ejecuta funciones del padre

• ✅ Podemos pasar parámetros del hijo al padre

• ✅ Usamos funciones flecha anónimas para evitar ejecución inmediata

• ✅ Logramos comunicación bidireccional entre componentes

---

🚀 Próximo paso

En el siguiente tutorial aprenderemos a:

• Validar props cuando no llegan correctamente

• Establecer valores por defecto para props

• Usar PropTypes para validación de tipos

---

Consejo final: Esta técnica es fundamental para crear componentes reutilizables que puedan comunicarse con sus padres, formando la base de aplicaciones React escalables y mantenibles