Ligando componentes com functions and props. 22/05/23

Hoje aprendi a ligar os componentes que não tem como importá-los.

A comunicação entre os componentes que não podem ser exportados é por meio de propriedades. Como assim?
O componente pai pode ter os seguintes dados:

// Componente pai
function paiComponent( ) {
  const data = "Dados do pai";
  return <ChildComponent data={data} />;
}

// Componente filho
function filhoComponent(props) {
  return <div>{props.data}</div>;
}

E aqui no componente filho, pegamos as propriedades do componente pai, e podemos retornar o conteudo do componente pai. Nisso, ligamos os Componentes pai e filho pelas propriedades. Simples, não?

Mas no que isso pode ser útil? Minha experiência:

Meu projeto no curso é sobre o feed de uma rede social, logo tem os posts com comentários. Usando o useStates podemos adicionar novos comentários, mas também podemos nos arrepender do que escrevemos... E aí vem a função de excluir o comentário.

Porém, não é possível aplicar a função de excluir o comentário sem puxar as propriedades do componente pai (que é o post em geral, incluindo o componente de comentario) para o componente filho (que é o componente que possui os comentários). Fazendo esse processo, você já tem a estrutura pronta para aplicar a exclusão de comentários.