Misión 1 · Lección 5

Comunicación entre Componentes

Objetivos

• Comprender cómo los componentes se comunican entre sí en React.
• Aprender a pasar datos del componente padre al hijo usando props.
• Entender cómo enviar información del hijo al padre.
• Practicar el patrón de "levantamiento de estado" (lifting state up).

Comunicación entre componentes

En React, las aplicaciones se construyen a partir de múltiples componentes. Para que trabajen juntos, deben compartir información.

• Los padres pueden enviar datos a los hijos usando props.
• Los hijos pueden enviar datos o eventos al padre mediante funciones.

Envío de datos con Props

function Saludo({ nombre }) {
  return <h3>Hola, {nombre}!</h3>;
}

export default function App() {
  return (
    <div>
      <Saludo nombre="Ana" />
      <Saludo nombre="Carlos" />
    </div>
  );
}

Las props son de solo lectura. El componente padre las define, y el hijo las recibe como parámetros.

Props dinámicas desde el estado

import { useState } from "react";

function Contador({ valor }) {
  return <p>Valor actual: {valor}</p>;
}

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <Contador valor={count} />
      <button onClick={() => setCount(count + 1)}>Incrementar</button>
    </div>
  );
}

El estado se mantiene en el padre y se pasa al hijo como prop.

Enviar datos del hijo al padre

Para comunicar datos hacia el padre, se pasa una función como prop.

function Hijo({ onEnviar }) {
  return (
    <button onClick={() => onEnviar("Mensaje del hijo")}>
      Enviar mensaje
    </button>
  );
}

export default function Padre() {
  function manejarMensaje(msg) {
    alert("Recibido: " + msg);
  }

  return <Hijo onEnviar={manejarMensaje} />;
}

Levantamiento de Estado

Cuando dos componentes necesitan compartir el mismo dato, el estado debe moverse hacia su antecesor común.

function InputUsuario({ nombre, setNombre }) {
  return (
    <input
      type="text"
      value={nombre}
      onChange={(e) => setNombre(e.target.value)}
    />
  );
}

function MostrarNombre({ nombre }) {
  return <p>Hola, {nombre}!</p>;
}

export default function App() {
  const [nombre, setNombre] = useState("");

  return (
    <div>
      <InputUsuario nombre={nombre} setNombre={setNombre} />
      <MostrarNombre nombre={nombre} />
    </div>
  );
}

Uso de props.children

Permite que un componente contenga otros elementos o componentes hijos.

function Tarjeta({ children }) {
  return <div className="card">{children}</div>;
}

export default function App() {
  return (
    <Tarjeta>
      <h3>Bienvenido</h3>
      <p>Contenido dentro de la tarjeta</p>
    </Tarjeta>
  );
}

Buenas prácticas

• Usa nombres descriptivos para props y funciones.
• Evita pasar props innecesarias o muy anidadas.
• Centraliza el estado solo cuando varios componentes lo necesiten.
• Usa props.children para componentes reutilizables.

Ejercicio Guiado 🧠

1. Crea un componente <FormularioUsuario /> que permita escribir un nombre.
2. Pasa el nombre al componente padre para mostrarlo en pantalla.
3. Agrega un botón en el hijo que borre el nombre (llamando una función del padre).

Resumen de la Lección

• Los componentes se comunican usando props y funciones.
• El flujo de datos en React es unidireccional (padre → hijo).
• Para compartir estado, se usa el levantamiento de estado.
• props.children permite componer interfaces flexibles y reutilizables.

🚀 Con esto puedes conectar tus componentes y crear aplicaciones más modulares.