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.

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:

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:

Resultado do uso de props

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

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;

Reutilizando componente

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:

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;