Que sont les props ?

Réutiliser un composant est une bonne chose, mais trois étoiles identiques ne sont pas très utiles. Les Props vous permettent de passer des données à un composant, afin que chaque copie puisse être différente :

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

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

Deux choses se produisent ici :

• Transmission : les props ressemblent à des attributs : name="Ada"
• Réception : le composant les extrait dans sa liste de paramètres ({ name }) et les utilise dans le JSX comme n'importe quelle variable

Même composant, données différentes, sortie différente : Hello, Ada! et Hello, Alan!. Les props permettent aux parents de configurer leurs enfants.