07 — Rendu conditionnel

🔍 Principe

En React, on affiche différents éléments selon des conditions. Comme on ne peut pas utiliser if/else directement dans le JSX (ce sont des blocs, pas des expressions), on utilise d'autres techniques.

📐 Les 5 techniques

1. if/else avant le return

function Message({ estConnecte }) {
    if (estConnecte) {
        return <p>Bienvenue !</p>;
    } else {
        return <p>Veuillez vous connecter.</p>;
    }
}

// Ou avec un early return :
function Message({ estConnecte }) {
    if (!estConnecte) {
        return <p>Veuillez vous connecter.</p>;
    }
    return <p>Bienvenue !</p>;
}

2. Opérateur ternaire ? :

L'approche la plus courante dans le JSX :

function Message({ estConnecte }) {
    return (
        <div>
            {estConnecte 
                ? <p>Bienvenue !</p> 
                : <p>Veuillez vous connecter.</p>
            }
        </div>
    );
}

// Pour du texte simple :
<p>Statut : {estConnecte ? '🟢 En ligne' : '🔴 Hors ligne'}</p>

3. Opérateur && (ET logique)

Pour afficher quelque chose ou rien :

function Notifications({ count }) {
    return (
        <div>
            <h2>Tableau de bord</h2>
            {count > 0 && <p>Vous avez {count} notifications</p>}
            {/* Si count > 0 → affiche le <p> */}
            {/* Si count === 0 → n'affiche rien */}
        </div>
    );
}

// ❌ Affiche "0" si count vaut 0
{count && <p>Notifs : {count}</p>}

// ✅ Correct
{count > 0 && <p>Notifs : {count}</p>}

4. Variable JSX

On peut stocker du JSX dans une variable :

function StatusIcon({ status }) {
    let icone;
    
    if (status === 'ok') {
        icone = <span style={{color: 'green'}}>✅ OK</span>;
    } else if (status === 'warning') {
        icone = <span style={{color: 'orange'}}>⚠️ Attention</span>;
    } else {
        icone = <span style={{color: 'red'}}>❌ Erreur</span>;
    }
    
    return <div>Statut : {icone}</div>;
}

5. Switch / objet de mapping

// Avec un objet (souvent plus propre qu'un switch)
function Badge({ type }) {
    const config = {
        admin:  { couleur: '#f44336', label: 'Admin' },
        editeur: { couleur: '#ff9800', label: 'Éditeur' },
        membre: { couleur: '#4caf50', label: 'Membre' }
    };

    const { couleur, label } = config[type] || config.membre;

    return (
        <span style={{ background: couleur, padding: '3px 10px', borderRadius: '12px', color: 'white' }}>
            {label}
        </span>
    );
}

🚫 Retourner null

Un composant peut retourner null pour ne rien afficher :

function BannierePromo({ visible }) {
    if (!visible) return null;

    return <div className="promo">🎉 Promo -50% !</div>;
}

🚀 Démo interactive

▼ Toutes les techniques de rendu conditionnel

📝 Résumé