Dúvida na props children

Oi, Turi, tudo bem?

A propriedade children no React é usada para passar componentes como dados para outros componentes, de uma forma que preserva a estrutura de árvore do DOM.

Vamos a um exemplo prático. Imagine que você tem um componente Caixa e você quer usar esse componente para envolver outros elementos, como um parágrafo:

<Caixa>
  <p>Olá, mundo!</p>
</Caixa>

Agora, se você quer que o componente Caixa renderize o que está dentro dele (neste caso, o parágrafo), você usaria props.children:

function Caixa(props) {
  return <div>{props.children}</div>;
}

Neste caso, props.children será o parágrafo que você passou entre as tags <Caixa></Caixa>. Isso é muito útil quando criamos componentes que não sabem o que vão renderizar antecipadamente, como uma caixa, um modal, um tooltip, entre outros.

Dessa forma, props.children pega automaticamente o conteúdo dentro do componente porque é essa a sua função: ser um "placeholder" para qualquer conteúdo que você queira passar entre as tags do componente.

Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!