Cosa sono le props?

Riutilizzare un componente è utile, ma tre stelle identiche servono solo fino a un certo punto. Le props ti permettono di passare dati a un componente, così ogni copia può essere diversa:

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

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

Qui succedono due cose:

• Passaggio: le props sembrano attributi: name="Ada"
• Ricezione: il componente le destruttura nell'elenco dei parametri ({ name }) e le usa in JSX come qualsiasi variabile

Stesso componente, dati diversi, output diverso: Hello, Ada! e Hello, Alan!. Le props sono il modo in cui i componenti genitori configurano quelli figli.