O Que São Props?

Reutilizar um componente é ótimo, mas três estrelas idênticas têm utilidade limitada. Props permitem que você passe dados para dentro de um componente, para que cada cópia possa ser diferente:

function Greeting({ name }) {
    return <p>Hello, {name}!</p>;
}

export default function App() {
    return (
        <div>
            <Greeting name="Ada" />
            <Greeting name="Alan" />
        </div>
    );
}

Duas coisas acontecem aqui:

• Passando: props se parecem com atributos: name="Ada"
• Recebendo: o componente as desestrutura em sua lista de parâmetros ({ name }) e as usa no JSX como qualquer variável

Mesmo componente, dados diferentes, saída diferente: Hello, Ada! e Hello, Alan!. Props são como os componentes pai configuram seus filhos.