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

El patrón de control props permite a un componente padre manejar el estado de un componente hijo, facilitando una comunicación controlada entre ambos. Esto resulta especialmente útil para gestionar estados y personalizar comportamientos. En esta lección, veremos un ejemplo práctico de un toggle controlado por el padre, y exploraremos sus beneficios para la reutilización y flexibilidad del código.

¿Cómo se configura un componente hijo con control props?

• Creamos el componente hijo (Toggle) que incluye:
  • Una prop isToggle, que indica si el estado inicial es true o false.
  • Una prop onToggle, función para notificar al padre sobre el cambio de estado.
• Definimos el tipo de datos (TypeScript) para estas props, donde:
  • isToggle es un booleano opcional.
  • onToggle es una función que acepta un booleano y no retorna ningún valor.
• Añadimos el uso de React.FunctionalComponent y asignamos estas props como parámetros del componente.

¿Cómo implementamos el estado interno del toggle?

• Establecemos un estado local internalToggle en el componente hijo utilizando useState.
  • El estado inicial toma el valor de isToggle.
  • Creamos una función toggle para alternar entre true y false.
  • Validamos si onToggle fue pasada como prop; si es así, se ejecuta para notificar al padre.
• Renderizamos un botón que:
  • Cambia su estado al hacer clic.
  • Muestra un mensaje que varía según el estado (On o Off).

¿Cómo comunica el estado el componente hijo al componente padre?

• En el componente padre:
  • Llamamos al componente hijo (Toggle) y pasamos las props isToggle y onToggle.
  • Creamos un estado local en el padre (toggleState) con useState, inicializado en false.
  • Pasamos toggleState y setToggleState al hijo para sincronizar el estado entre ambos.
  • Añadimos un mensaje en el padre que refleja el estado actual del toggle.

¿Qué beneficios aporta el uso de control props?

• Gestión centralizada del estado: El padre controla el estado del hijo, simplificando la lógica de la aplicación.
• Comunicación padre-hijo: Facilita la transmisión de información en una única dirección, lo cual es esencial para manejar estados en aplicaciones complejas.
• Reutilización de código: El componente hijo se puede utilizar en otros contextos, manteniendo el control desde el padre.
• Flexibilidad y personalización: La lógica de estado del hijo es fácilmente adaptable para diferentes casos de uso.