Chapitre 5 — Listes, conditions et événements

🔁 Affichage dynamique

En React, on utilise des expressions JavaScript directement dans le JSX pour afficher des listes, conditions, événements.

1. Conditions

// Opérateur ternaire
{isLoggedIn ? <p>Bienvenue</p> : <p>Connectez-vous</p>}

// Court-circuit AND
{hasError && <p style={{color:'red'}}>Erreur</p>}

2. Affichage de listes (.map)

const fruits = ['🍎', '🍌', '🍊'];

function ListeFruits() {
return (
<ul>
{fruits.map((f, i) => (
<li key={i}>{f}</li>
))}
</ul>
);
}

3. La prop key (importante !)

⚠️ Chaque élément d''une liste doit avoir une key unique et stable. Préférez l''id de la donnée (key={user.id}) plutôt que l''index, sauf si la liste ne change jamais.

4. Gestion des événements