Nesta postagem do blog, mostrarei um cenário prático onde um componente pai (ListBox) interage com um componente filho (AlertComponent) usando adereços e retornos de chamada.

Isso é útil no React quando você deseja que um componente filho se comunique de volta ao pai para manter o estado ou acionar ações.

Vamos entender com a ajuda deste exemplo:

• Eu tenho um componente ListBox que exibe uma lista de itens. Quando o usuário pressiona longamente qualquer item, uma caixa de diálogo de alerta aparece perguntando se o usuário deseja excluir o item ou não.

Aqui está o detalhamento da interação:

1. ListBox (Parent) renderiza os itens e passa os adereços e retornos de chamada necessários para o AlertComponent (Child).

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. O AlertComponent aceita adereços como título, descrição e retornos de chamada, como onAccept, onCancel, e um adereço de mudança de estado showComponent.

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

1. O componente pai precisa gerenciar a visibilidade da caixa de diálogo, e o componente filho interage com o pai emitindo eventos por meio de retornos de chamada para alternar essa visibilidade.

showComponent está funcionando como um retorno de chamada, pois mantém o estado responsável por mostrar/ocultar o AlertComponent

Sempre que Reject for pressionado, esse retorno de chamada alternará o estado atual de showComponent.

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

Usar props e callbacks dessa forma permite um fluxo claro de dados entre os componentes pai e filho no React.

O pai pode controlar o estado e passá-lo para o filho, enquanto o filho pode se comunicar de volta por meio de retornos de chamada para informar o pai sobre quaisquer alterações ou ações que o usuário tenha executado.

Isso é particularmente útil para cenários como exibição de alertas, modais ou pop-ups em resposta à interação do usuário.

Continue construindo!