Les composants doivent souvent afficher des données différentes selon l'endroit où ils sont utilisés. En React, les données sont transmises aux composants à l'aide des props. Les props sont des entrées pour un composant. Elles permettent d'envoyer des données d'un composant parent à un composant enfant et de contrôler ce que le composant affiche.

Au lieu de coder en dur des valeurs à l'intérieur d'un composant, les props rendent les composants réutilisables. Le même composant peut être utilisé plusieurs fois avec des données différentes, produisant ainsi des sorties d'interface utilisateur variées.

Voici un exemple simple de transmission de données à un composant à l'aide des props :

function Greeting(props) {
  return <h2>Hello, {props.name}</h2>;
}

function App() {
  return <Greeting name="Olivia" />;
}

Dans cet exemple, le composant App transmet la valeur "Olivia" au composant Greeting en utilisant une prop appelée name. Le composant Greeting reçoit cette donnée et l'affiche dans l'interface utilisateur.