04 — Props

🔍 C'est quoi les Props ?

Les props (properties) sont le mécanisme pour passer des données d'un composant parent à un composant enfant. C'est comme les attributs HTML, mais pour tes propres composants.

// Le parent passe des props
<CarteProduit nom="iPhone" prix={999} />

// L'enfant les reçoit dans un objet
function CarteProduit(props) {
    return <p>{props.nom} — {props.prix}€</p>;
}

📐 Syntaxe des Props

1. Passer des props

// String → guillemets
<Composant titre="Bonjour" />

// Nombre, booléen, objet, tableau → accolades
<Composant age={25} />
<Composant actif={true} />
<Composant style={{ color: 'red' }} />
<Composant fruits={['pomme', 'poire']} />

// Fonction
<Composant onClic={() => alert('Hey!')} />

// Booléen raccourci (true implicite)
<Composant actif />   {/* équivalent à actif={true} */}

2. Recevoir des props (objet props)

function Salutation(props) {
    return <h2>Bonjour {props.nom}, tu as {props.age} ans !</h2>;
}

3. Déstructuration (recommandé ✅)

Pour éviter de répéter props. partout :

// Déstructuration dans les paramètres
function Salutation({ nom, age }) {
    return <h2>Bonjour {nom}, tu as {age} ans !</h2>;
}

// Ou dans le corps
function Salutation(props) {
    const { nom, age } = props;
    return <h2>Bonjour {nom}, tu as {age} ans !</h2>;
}

4. Valeurs par défaut

function Bouton({ texte = "Cliquer", couleur = "#61dafb" }) {
    return (
        <button style={{ backgroundColor: couleur }}>
            {texte}
        </button>
    );
}

// Utilisation
<Bouton />                           {/* "Cliquer" en bleu */}
<Bouton texte="Envoyer" />           {/* "Envoyer" en bleu */}
<Bouton texte="Supprimer" couleur="red" />

👶 props.children

children est une prop spéciale qui contient tout ce qui est entre les balises du composant :

function Encadre({ titre, children }) {
    return (
        <div style={{ border: '2px solid #61dafb', padding: '1rem', borderRadius: '8px' }}>
            <h3>{titre}</h3>
            {children}  {/* ← Le contenu passé entre les balises */}
        </div>
    );
}

// Utilisation
<Encadre titre="Important">
    <p>Ce texte est le "children" du composant Encadre.</p>
    <p>On peut mettre n'importe quel JSX ici.</p>
</Encadre>
💡 Pattern courant : children permet de créer des composants « wrapper » réutilisables (Card, Modal, Layout…).

⚠️ Les props sont en lecture seule

Règle fondamentale : Un composant ne doit jamais modifier ses props. Les props descendent du parent vers l'enfant (flux unidirectionnel).

// ❌ INTERDIT — Ne jamais faire ça
function Mauvais(props) {
    props.nom = "Autre"; // ERREUR !
    return <p>{props.nom}</p>;
}

// ✅ CORRECT — Les props sont en lecture seule
function Bon({ nom }) {
    return <p>{nom}</p>;
}

🔀 Spread operator avec les props

const infosUtilisateur = {
    nom: "Alice",
    age: 30,
    email: "alice@mail.com"
};

// Au lieu de :
<Profil nom={infosUtilisateur.nom} age={infosUtilisateur.age} email={infosUtilisateur.email} />

// On peut faire :
<Profil {...infosUtilisateur} />

🚀 Démo interactive

▼ Composants paramétrés par leurs props

📝 Résumé

← 03 — Composants 05 — State →