Les props

Les props

Les composants React utilisent les props ou properties pour échanger des informations entre eux. Un composant parent transmet des données à ses composants enfants en leur assignant des props. Les props permettent de passer n’importe quelle valeur JavaScript, y compris des objets, des tableaux ou des fonctions, offrant ainsi une grande flexibilité dans la gestion des données. Elles permettent d’adapter le comportement ou l'affichage du composant enfant en fonction des données reçues. En résumé, une prop sert à personnaliser et à dynamiser un composant en lui fournissant des valeurs ou des fonctions.

Exemple

Dans l'exemple ci-dessous, la balise <StudentCard /> représente un composant qui reçoit plusieurs props : name, age, isLoggedIn, profilePicture, et handleClick. Ces props permettent de transmettre des informations et des comportements spécifiques au composant StudentCard.

function StudentProfile() {
  return (
    <StudentCard
      name="John Doe"
      age={19}
      isLoggedIn={true}
      profilePicture="img/LOGO-FINAL-V2.png"
      handleClick={() => alert('Profile clicked!')}
    />
  );
}