Props et State dans React

Les props et le state sont deux concepts fondamentaux de React pour la gestion des données. Ils permettent de rendre les composants dynamiques et interactifs.

Les Props

Les props (propriétés) sont un moyen de passer des données d'un composant parent à un composant enfant. Elles sont en lecture seule et ne peuvent pas être modifiées par le composant enfant.

Utilisation des props

// Composant enfant
function UserCard({ name, age, email }) {
  return (
    <div className="user-card">
      <h2>{name}</h2>
      <p>Âge : {age}</p>
      <p>Email : {email}</p>
    </div>
  );
}

// Composant parent
function App() {
  return (
    <div className="app">
      <UserCard
        name="Marie Dupont"
        age={25}
        email="marie@example.com"
      />
    </div>
  );
}

Props par défaut

Vous pouvez définir des valeurs par défaut pour les props :

function Button({ text = "Cliquez-moi", onClick }) {
  return <button onClick={onClick}>{text}</button>;
}

Props.children

La prop spéciale children permet de passer du contenu entre les balises d'un composant :