Les props : passer des données à un composant

Apprenez à rendre vos composants réutilisables en leur transmettant des données grâce aux props.

7 min · 3 questions

Un composant qui affiche toujours la même chose a peu d'intérêt. Les props (abréviation de « properties », propriétés en anglais) sont les données que l'on transmet à un composant, exactement comme les arguments d'une fonction. Pensez à une carte d'invitation : le modèle est identique pour tout le monde, seul le prénom de l'invité change. Le composant est le modèle, la prop est le prénom.

function Greeting(props) {
  return <p>Bonjour, {props.name} !</p>;
}

function App() {
  return (
    <div>
      <Greeting name="Lea" />
      <Greeting name="Karim" />
    </div>
  );
}

Dans App, on écrit name="Lea" comme un attribut HTML : React regroupe toutes ces valeurs dans un objet, reçu par le composant sous le nom props. On lit ensuite props.name entre accolades. En pratique, on déstructure souvent les props directement dans les parenthèses de la fonction : function Greeting({ name }). Autre point important : les textes se passent entre guillemets, mais tout le reste (nombres, booléens, tableaux) se passe entre accolades.

function ProfileCard({ name, age }) {
  return (
    <div>
      <h3>{name}</h3>
      <p>{age} ans</p>
    </div>
  );
}

function App() {
  return <ProfileCard name="Nadia" age={31} />;
}

C'est toute la puissance des props : un réseau social n'écrit pas un composant par publication, il écrit un seul composant Post et lui passe des props différentes des millions de fois. Vous écrivez le modèle une fois, vous l'utilisez partout.

Quiz de validation

Vérifiez que vous avez bien retenu les points clés de cette leçon.

1. À quoi servent les props ?
   • À transmettre des données d'un composant parent à un enfant
   • À stocker des données qui changent au fil du temps
   • À appliquer du style CSS à un composant
2. Comment passer le nombre 25 à un composant Profile ?
   • <Profile age="25" />
   • <Profile age={25} />
   • <Profile age=25 />
3. Un composant peut-il modifier les props qu'il reçoit ?
   • Oui, à condition de le faire dans le return
   • Oui, mais uniquement les textes
   • Non, les props sont en lecture seule