# 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="/files/TnfC9UQb0dUE3QK4nz2o" 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="/files/3EIu30lgn4Ww4f8FkaSO" 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;
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://uclsanca.gitbook.io/learn/web-avancado/reactjs/props.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.