> For the complete documentation index, see [llms.txt](https://uclsanca.gitbook.io/learn/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uclsanca.gitbook.io/learn/web-avancado/reactjs/props.md).

# Props

Digamos que você queira desejar boas-vindas a várias pessoas diferentes, mostrando o nome de cada uma delas na tela. Você precisa criar um componente para cada pessoa? Não! Aqui veremos outra magia do React: as props, ou propriedades. Podemos passar informações para os componentes, que serão utilizadas dentro deles. Essas propriedades podem ser dados, funções, objetos ou qualquer outra coisa. Para utilizá-las, passamos a informação da mesma forma que fazemos com tags HTML, como por exemplo a tag `<a>`, quando passamos o `href` para onde queremos direcionar.

```jsx
import React from 'react';  
interface BoasVindasProps { //criamos uma interface para dizer o tipo dos dados que 
    nome: string;           //estamos esperando
}  

function BoasVindas(props: BoasVindasProps) {  // Define o componente Apresentacao  
    return (  
        <h3>Olá, seja bem vindo {props.nome}!</h3> // Utilizando as props  
    )  
}  

export default BoasVindas;
```

Para utilizá-lo, fazemos o seguinte 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 className="App">  
            <Apresentacao />  
            <BoasVindas nome="Miguel"/> { /* Componente com props */ }  
        </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%2FKc0VAL0Gyo5EELEgViTs%2Fimage.png?alt=media&amp;token=8d119c8b-cacf-40cd-a4cf-b3df961d221c" alt=""><figcaption><p>Resultado do uso de props</p></figcaption></figure>

Como estamos utilizando componentes, podemos sempre reutilizá-los:

```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 className="App">  
            <Apresentacao />  
            <BoasVindas nome="Miguel"/>  
            <BoasVindas nome="Larissa"/>  
            <BoasVindas nome="Codelab"/>  
            <BoasVindas nome="Gotenery"/>  
            <BoasVindas nome="Shogo"/>  
            <BoasVindas nome="Calleri"/>  
        </div>  
    );  
}  

export default App;
```

<figure><img src="https://552011742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MEJ_IxNzk9of-u9NQeq%2Fuploads%2FErZiP6elZe40kbh8wzZp%2Fimage.png?alt=media&amp;token=5e1b4c06-061e-4424-93be-1a8d07fde85e" alt=""><figcaption><p>Reutilizando componente</p></figcaption></figure>

Supondo agora que tenhamos muitos nomes para mostrar. Ficar copiando e colando os elementos vai deixar o código feio e nada agradável (como o exemplo acima deixa bem claro). Para contornar esse problema, podemos utilizar a função map(), da seguinte forma:

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

import Apresentacao from './components/Apresentacao/Apresentacao';  
import BoasVindas from './components/BoasVindas/BoasVindas';  

function App() {  
    // Lista de nomes  
    const nomes = ['Miguel', 'Larissa', 'Codelab', 'Gotenery', 'Shogo', 'Calleri'];  

    return (  
        <div className="App">  
            <Apresentacao />  
            {nomes.map((nome, index) => (  
                <BoasVindas key={index} nome={nome} />  
            ))}  
        </div>  
    );  
}  

export default App;
```