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

Resumen

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.

Nicolas Esteban Molina Parada

student•

Si quieren evitarse el if pueden usar onToogle?.(newToogle);

El operador ?. Permite verificar si un valor es null o undefined antes de intentar acceder a una propiedad o método.

Jose Xavier Ramos Gonzalez

student•

Otra forma seria:

onToggle && onToggle(!localToogle);

Jaime Aza

student•

Es necesario crear un estado interno ? no es suficiente con parsar el estado del padre como prop al componente hijo ? Quedaría algo como esto:

export const Toggle: React.FC<ToggleProps> = ({
  isToggle = false,
  onToggle,
}) => {
  const handleToggle = () => {
    if (onToggle) onToggle(!isToggle);
  };

  return <button onClick={handleToggle}>{isToggle ? "ON" : "OFF"}</button>;
};

Alfredo Jose Villegas Pachano

student•

Hola. El estado interno se usa para mantener la logica y responsibilidad en ese componente hijo y lo puedes reutilizar sin obligar a cada padre a gestionar ese estado, y ademas con este patron lo haces lo suficientemente flexible para que un padre pueda enterarse de ese cambio y haga lo que tenga que hacer, pero no obligas a todos los padres a gestionar esa misma logica de ese estado cada vez (solo le avisas que algo cambio)

creo que Tambien puede ayudar a que la responsibilidad de ese componente hijo no se vea afectado por los diferentes formas que lo usaran sus padres

Martín Alfredo Yela

student•

Buenas! Depende un poco de lo que necesites, si pones un estado interno evitas tener la obligación de pasarle las props en caso de que no necesites saber el cambio en el componente padre, ten en cuenta que puedes llamarlo desde varios sitios y en alguno puedes necesitar saber el cambio y en otro no, entonces "ahorras" el crear estados en componentes donde no lo necesites.

Por otro lado se puede dar el caso de que el botón que activa el toggle no necesites tenerlo dentro del hijo, por ejemplo puedes necesitar activarlo desde un botón que tienes en algún otro sitio, y ahí sería necesario hacer como tu dices, porque el control del toggle no está internamente.

Igualmente, según mi experiencia, creo que se utiliza más ponerlo sólo en el padre, es más fácil centralizar el estado, y propagar cambios si lo necesitas hacía otros componentes hijos

Wilberk Ledezma

student•

Primera vez que veo un curso de React así, estoy pensando más de lo normal, eso quiere decir que es un buen curso.

Estefany Aguilar

teacher•

Me encanta leer esto, Wilderk !!! 🔥

Ismael Cruz Procel

student•

¿En que casos es mejor utilizar control props y en que casos el context?

Víctor Rolack

student•

Yo creo que depende sde la magnitud del feature que debes hacer. Si la lógica involucra solo a un componente hijo y un padre, le veo sentido usar este patrón, pero si ya involucra, por ejemplo, un padre y tres hijos, y que adicional los hijos tengan hijos y exista lógica que se relacione al padre, sería mejor usar un contexto, sobre todo para evitar el prop drealing que podría generarse desde el padre hasta sus nietos, por así decirlo. Saludos crack!

Gonzalo Blasco

student•

En TypeScript, tanto type como interface se utilizan para definir estructuras de datos, pero hay diferencias clave:

Extensibilidad: interface permite la extensión mediante la palabra clave extends, lo que facilita la creación de jerarquías de tipos. type no tiene esta capacidad.
Unión de tipos: type puede definir uniones (type A = B | C), mientras que interface no puede.
Implementación en clases: interface puede ser implementada por clases (class MyClass implements MyInterface), mientras que type no.

Ambos son útiles, pero elige interface para definiciones que necesiten extensibilidad y type para uniones o definiciones más complejas.

Francisco Ulloa

student•

en los archivos de la clase estan subidos los archivos del node_modules

Daniel Loyo

student•

por fin que buen curso de platzi sobre react, era necesario renovar los cursos de la ruta de react, me parece muy profundo y complicado, me encanta!

Kevin Niño Guerrero

student•

se puede ahorrar varias lineas de codigo creo que asi quedaria mas sencilloimport import { useState } from "react"; type ToogleProps = { isToggled: boolean; onToggle: (value: boolean) => void;}; export const Toggle: React.FC<ToogleProps> = ({ isToggled, onToggle,}) => { return ( <> <button onClick={()=> onToggle(!isToggled)}>{isToggled ? "ON" : "OFF"}</button> </> );}; export const ParentComponent = () => { const [togglesState, setTogglesState] = useState(true) return( <div> <p>Toggle is</p> <Toggle isToggled={togglesState} onToggle={setTogglesState}></Toggle> </div> ); };

import { useState } from "react";

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

export const Toggle: React.FC<ToogleProps> = ({
  isToggled,
  onToggle,
}) => {
 
  return (
    <>
      <button onClick={()=> onToggle(!isToggled)}>{isToggled ? "ON" : "OFF"}</button>
    </>
  );
};

export const ParentComponent = () => {
  const [togglesState, setTogglesState] = useState(true)
  return( 
  <div>
    <p>Toggle is</p>
    <Toggle isToggled={togglesState} onToggle={setTogglesState}></Toggle>
  </div>
  );
  
};

tzalabata15625

student•

La gracia del patrón control props es poder utilizar el componente child con o sin props de su componente padre. Lo cual requiere de más código pero hace al componente más flexible.

Jorge Arias Argüelles

student•

El patrón Control Props es un enfoque en React que permite al componente padre gestionar el estado y el comportamiento de un componente hijo a través de props. Este patrón soluciona el problema de la comunicación entre componentes y facilita la reutilización del código.

Implementación

Componente Hijo: Recibe props como isToggle (booleano) y onToggle (función para notificar al padre).
Componente Padre: Mantiene el estado y pasa las props al hijo.

Casos de Uso

Formularios donde el padre controla la validación.
Componentes de UI que necesitan ser reutilizados con diferentes estados.

Este patrón mejora la mantenibilidad y la escalabilidad en aplicaciones React.

Juan Camilo Noreña López

student•

¿Pueden darme otro ejemplo de donde conviene usar Control Props? Gracias

Richard Espinoza

student•

Otro ejemplo de uso para el Control Props puede ser el uso de botones genericos, donde reciba por parametros una funcion a ejecutar en el onClick. Por ejemplo

const Button = ({ text, onClick, color }) => {
  return (
    <button style={{ backgroundColor: color }} onClick={onClick}>
      {text}
    </button>
  );
};

// Uso
<Button text="Guardar" onClick={handleSave} color="green" />
<Button text="Cancelar" onClick={handleCancel} color="red" />

Mariana Valencia Gallego

student•

Muy buen ejemplo de control props!

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

Patrones de renderizado y composición

Actualización de Herramientas de Desarrollo con React 2023

Render Props y Composición en React: Ventajas y Desventajas