En esta publicación de blog, lo guiaré a través de un escenario práctico donde un componente principal (ListBox) interactúa con un componente secundario (AlertComponent) usando accesorios y devoluciones de llamadas.

Esto es útil en React cuando desea que un componente secundario se comunique con el principal para mantener el estado o desencadenar acciones.

Entendamos con la ayuda de este ejemplo:

• Tengo un componente ListBox que muestra una lista de elementos. Cuando el usuario mantiene presionado cualquier elemento, aparece un cuadro de diálogo de alerta que le pregunta si desea eliminar el elemento o no.

Aquí está el desglose de la interacción:

1. ListBox (principal) representa los elementos y pasa los accesorios y devoluciones de llamada necesarios al AlertComponent (secundario).

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

const ListBox = () => {
  const [showComponent, setShowComponent] = useState(false);

  const alertAction = async () => {
    setShowComponent(!showComponent);
  };

  return (
    

      

        
Item 1
        {/* Other list items */}
      

      {/* Passing props to the child component */}
       {
          alert('Item Deleted');
          setShowComponent(false);
        }}
        onCancel={() => setShowComponent(false)}
        showComponent={alertAction}

      />
    
  );
};

export default ListBox;

1. El AlertComponent acepta accesorios como título, descripción y devoluciones de llamada como onAccept, onCancel y un accesorio de cambio de estado showComponent.

export const AlertComponent: = ({ title, description, 
onAccept, onCancel, showComponent }) => {
return (
... rest of the code
)
}

1. El componente principal necesita administrar la visibilidad del cuadro de diálogo y el componente secundario interactúa con el principal emitiendo eventos a través de devoluciones de llamada para alternar esta visibilidad.

showComponent funciona como una devolución de llamada ya que mantiene el estado que es responsable de mostrar/ocultar el AlertComponent

Siempre que se presione Rechazar, esta devolución de llamada alternará el estado actual de showComponent.

 {
          alert('Item Deleted');
          setShowComponent(false);
        }}
        onCancel={() => setShowComponent(false)}
        showComponent={alertAction}
      />

El uso de props y callbacks de esta manera permite un flujo claro de datos entre los componentes principal e secundario en React.

El padre puede controlar el estado y pasárselo al niño, mientras que el niño puede comunicarse mediante devoluciones de llamada para informar al padre de cualquier cambio o acción que haya realizado el usuario.

Esto es particularmente útil para escenarios como mostrar alertas, modales o ventanas emergentes en respuesta a la interacción del usuario.

¡Sigue construyendo!