Pasar funciones del padre al hijo en React Native

🎯 Objetivo

Aprender a:

1. Pasar funciones del padre al hijo mediante props.

2. Que el hijo ejecute esa función.

3. Que el hijo devuelva información al padre.

---

🧩 Punto de partida

Tenemos un componente que renderiza un botón "Saludar". Al presionarlo, queremos que aparezca un mensaje de saludo con el nombre de un usuario.

La clave: la lógica del saludo debe vivir en el padre, no en el hijo.

---

⚠️ Antes de empezar: el error que hay que evitar

Muchos tutoriales arrancan mostrando el "problema" así:

jsx

// ❌ VERSIÓN INCORRECTA (solo para entender qué NO hacer)
export default function Saludar(props) {
    const saludar = () => {
        Alert.alert('Saludo', 'Hola Agustín');
    };
    return <Button title="Saludar" onPress={saludar} />;
}

¿Por qué está mal?

• La función saludar está dentro del hijo.

• El hijo sabe demasiado: sabe el nombre, sabe qué mostrar, sabe cómo mostrarlo.

• El padre no tiene ningún control.

• Si mañana quieres saludar a otra persona, tienes que tocar el hijo.

👉 Regla: la lógica vive en el padre. El hijo solo dispara la acción.

---

🔧 Paso 1: Definir la función y los datos en el PADRE

jsx

// App.js
import React from 'react';
import { View } from 'react-native';
import Saludar from './components/Saludar';

function App() {
    // Datos del usuario (los maneja el padre)
    const user = {
        nombre: 'Agustín Navarro Galdón',
        edad: 26,
        color: 'Azul',
    };

    // Lógica del saludo (vive en el padre)
    const saludarFn = () => {
        console.log('Hola Agustín');
    };

    return (
        <View>
            <Saludar userInfo={user} saludarFn={saludarFn} />
        </View>
    );
}

export default App;

🔑 Puntos clave

• user → datos que el padre posee.

• saludarFn → acción que el padre define.

• Se pasan al hijo como props.

• ⚠️ Se pasa saludarFn sin paréntesis (es la referencia, no la ejecución).

💡 Nota Android: console.log se ve en la terminal de Metro Bundler o en Logcat de Android Studio.

---

🔧 Paso 2: Recibir y ejecutar la función en el HIJO

jsx

// components/Saludar.js
import React from 'react';
import { View, Button } from 'react-native';

export default function Saludar({ userInfo, saludarFn }) {
    console.log('Props recibidas:', { userInfo, saludarFn });

    return (
        <View style={{ padding: 20 }}>
            <Button title="Saludar" onPress={saludarFn} />
        </View>
    );
}

🔑 Puntos clave

• El hijo no define ninguna función propia.

• Solo recibe saludarFn y la conecta al onPress.

• Se usa destructuring { userInfo, saludarFn } en lugar de props.saludarFn → más limpio.

📋 Resultado en consola

text

Props recibidas: {
  userInfo: { nombre: 'Agustín Navarro Galdón', edad: 26, color: 'Azul' },
  saludarFn: [Function: saludarFn]
}

✅ Al presionar el botón → se ejecuta saludarFn del padre → aparece "Hola Agustín" en la consola.

---

🚀 Paso 3: Que el hijo DEVUELVA información al padre

Hasta ahora el padre solo dice "Hola Agustín" fijo. Pero el objetivo dice:

"cómo el hijo puede devolver información al padre"

Para eso, el hijo debe enviarle datos a la función del padre.

🔧 Modificamos el hijo para pasar el nombre

jsx

// components/Saludar.js
import React from 'react';
import { View, Button } from 'react-native';

export default function Saludar({ userInfo, saludarFn }) {
    return (
        <View style={{ padding: 20 }}>
            <Button
                title="Saludar"
                // 👇 el hijo le pasa el nombre al padre
                onPress={() => saludarFn(userInfo.nombre)}
            />
        </View>
    );
}

🔑 ¿Por qué () => saludarFn(...) y no saludarFn(...)?

• onPress={saludarFn(userInfo.nombre)} → ❌ ejecuta la función en el render (error).

• onPress={() => saludarFn(userInfo.nombre)} → ✅ envuelve la llamada para que se ejecute solo al presionar.

---

🔧 Paso 4: El padre recibe el dato y reacciona

jsx

// App.js
import React, { useState } from 'react';
import { View, Text } from 'react-native';
import Saludar from './components/Saludar';

function App() {
    const user = {
        nombre: 'Agustín Navarro Galdón',
        edad: 26,
        color: 'Azul',
    };

    // Estado para guardar el último saludo recibido
    const [ultimoSaludo, setUltimoSaludo] = useState('');

    // 👇 recibe el nombre que le manda el hijo
    const saludarFn = (nombre) => {
        console.log(`Hola ${nombre}`);
        setUltimoSaludo(nombre);
    };

    return (
        <View>
            <Saludar userInfo={user} saludarFn={saludarFn} />

            {ultimoSaludo !== '' && (
                <Text style={{ padding: 20, fontSize: 18 }}>
                    Último saludo: {ultimoSaludo}
                </Text>
            )}
        </View>
    );
}

export default App;

---

🧠 ¿Qué acaba de pasar? (flujo completo)

1. El usuario toca el botón (en el hijo).

2. El hijo llama saludarFn(userInfo.nombre) → le pasa el nombre al padre.

3. El padre recibe nombre → hace console.log y actualiza su estado con setUltimoSaludo.

4. React vuelve a renderizar → aparece "Último saludo: Agustín Navarro Galdón" en pantalla.

---

📊 Diagrama del flujo

text

┌─────────────────────────────────────────────┐
│  PADRE (App.js)                             │
│  ├── datos: user { nombre, edad, color }    │
│  ├── lógica: saludarFn(nombre)              │
│  ├── estado: ultimoSaludo                   │
│  └── renderiza <Saludar ... />              │
└──────────────────┬──────────────────────────┘
                   │  props: { userInfo, saludarFn }
                   ▼
┌─────────────────────────────────────────────┐
│  HIJO (Saludar.js)                          │
│  ├── recibe props                           │
│  ├── muestra el botón                       │
│  └── onPress → saludarFn(userInfo.nombre)   │
└──────────────────┬──────────────────────────┘
                   │  dato: nombre
                   ▼
┌─────────────────────────────────────────────┐
│  PADRE reacciona                            │
│  ├── console.log(`Hola ${nombre}`)          │
│  └── setUltimoSaludo(nombre) → re-render    │
└─────────────────────────────────────────────┘

---

✅ Resumen de correcciones al tutorial original

#	Problema del tutorial original	Corrección aplicada
1	El Paso 1 mostraba la función viviendo en el hijo, lo que confunde	Se aclaró que es solo el "anti-ejemplo"
2	El hijo no devolvía datos al padre	Se agregó onPress={() => saludarFn(userInfo.nombre)}
3	El padre no reaccionaba al dato	Se agregó useState para mostrar el saludo en pantalla
4	Se accedía a props.saludarFn	Se usó destructuring { userInfo, saludarFn }
5	No se explicaba por qué () rompe el onPress	Se explicó el uso de () => fn(...)

---

🎁 ¿Por qué este patrón importa?

Es la base de toda comunicación hijo → padre en React:

Caso real	Hijo envía al padre…
Formulario de login	usuario y contraseña
Lista de tareas	id de la tarea a borrar
Carrito de compras	id del producto a agregar
Modal	confirmación o cancelación

El hijo no decide nada. Solo avisa con datos. El padre decide qué hacer.

¿Quieres que armemos el siguiente ejemplo con una lista de tareas aplicando este mismo patrón (el hijo manda el id al padre para eliminar