Control de Props en React: Comunicación entre Componentes Padres e Hijos

Controla desde el componente padre el estado de un toggle hijo en React con TypeScript usando el patrón control props. Verás cómo definir props opcionales, manejar useState y notificar cambios para crear componentes reutilizables, mantenibles y con comunicación clara padre-hijo.

¿Qué es control props y por qué usarlo en React?

Este patrón permite que el padre controle el comportamiento del hijo, mientras el hijo notifica su estado. Aquí, el hijo administra un boolean interno (encendido/apagado) y, cuando cambia, llama una función pasada por props que informa al padre.

• Gestión del estado: el padre conoce y controla el estado del hijo.
• Comunicación acotada: solo entre padre e hijo, fácil de razonar.
• Reutilización y mantenibilidad: el hijo es personalizable y portable.

¿Cómo fluye la comunicación padre-hijo?

• El hijo guarda un estado local con useState iniciado desde isToggled.
• Al alternar, calcula el nuevo valor y ejecuta onToggle(newValue) si existe.
• El padre pasa isToggled y onToggle, y puede reflejar el estado en pantalla.

¿Qué estructura de props y tipos en TypeScript?

• ToggleProps con isToggled?: boolean y onToggle?: (value: boolean) => void.
• Props opcionales con el signo “?”.
• Valor inicial en el hijo: false por defecto para empezar apagado.

¿Cómo construir el componente hijo toggle en TypeScript?

El hijo define sus props, inicializa su estado con useState y expone una función toggle que alterna el valor, actualiza el estado y notifica al padre si la función llega por props.

import React, { useState } from 'react';

type ToggleProps = {
  isToggled?: boolean;
  onToggle?: (value: boolean) => void;
};

const Toggle: React.FC<ToggleProps> = ({ isToggled = false, onToggle }) => {
  const [internalToggle, setInternalToggle] = useState(isToggled);

  const toggle = () => {
    const newToggle = !internalToggle;
    setInternalToggle(newToggle);
    if (onToggle) onToggle(newToggle);
  };

  return (
    <button onClick={toggle}>
      {internalToggle ? 'on 🔛' : 'off 🤒'}
    </button>
  );
};

export default Toggle;

¿Qué props y estado maneja el toggle?

• isToggled: estado inicial opcional del toggle.
• onToggle: función opcional para notificar al padre.
• internalToggle: estado local que alterna entre true y false.

¿Cómo renderiza y notifica el botón?

• Un button con onClick llama a toggle.
• La etiqueta del botón usa un ternario para mostrar “on” u “off”.

¿Cómo controla el padre el estado del toggle?

El padre crea su propio estado, lo pasa como isToggled y entrega setToggleState como onToggle. Así refleja y controla el estado del hijo, además de mostrarlo en pantalla.

import React, { useState } from 'react';
import Toggle from './Toggle';

const Parent = () => {
  const [toggleState, setToggleState] = useState(false);

  return (
    <div>
      <Toggle isToggled={toggleState} onToggle={setToggleState} />
      <p>Toggle is {toggleState ? 'on 🔛' : 'off 🤒'}</p>
    </div>
  );
};

export default Parent;

¿Qué beneficios aporta este patrón?

• Control total del flujo desde el padre.
• Comunicación predecible y fácil de depurar.
• Hijo personalizable y reutilizable en distintas vistas.
• Mayor flexibilidad y mantenibilidad del código.

¿Qué otro ejemplo construirías con control props? Cuéntalo en los comentarios y pongamos manos a la obra.