# Children

`Children` no React refere-se a elementos que podem ser colocados dentro de outros, sendo assim os "filhos" deles. Assim como no HTML, você pode colocar elementos dentro do seu componente no React.

Mudança no componente:

```jsx
import React from 'react';

interface BoasVindasProps {
    nome: string;
    children: React.ReactNode;
}

function BoasVindas(props: BoasVindasProps) {
    return (
        <div>
            <h3>Olá, seja bem vindo {props.nome}!</h3>
            {props.children} {/* Filhos */}
        </div>
    )
}

export default BoasVindas
```

Mudança em App.tsx

```jsx
import React from 'react';
import './App.css';

// Importa o componente que criamos de seu diretório
import Apresentacao from './components/Apresentacao/Apresentacao';
import BoasVindas from './components/BoasVindas/BoasVindas';

function App() {
  return (
    <div>
      <BoasVindas nome="Fulano">
        <p>Esse aqui é legal</p>
      </BoasVindas>

      <BoasVindas nome="Ciclano">
        <p>Esse aqui nem tanto...</p>
      </BoasVindas>
    </div>
  );
}

export default App;
```

Resultado:

<figure><img src="https://552011742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MEJ_IxNzk9of-u9NQeq%2Fuploads%2FzqiOOHY44gzoIdF1Cthu%2Fimage.png?alt=media&#x26;token=21bd0101-992b-4905-852a-9ace2967ef86" alt=""><figcaption><p>Exemplo do uso de children</p></figcaption></figure>