Événements et rendu conditionnel

Réagissez aux actions de l'utilisateur et affichez ou masquez des éléments selon des conditions.

8 min · 3 questions

Un événement est une action de l'utilisateur : un clic, une touche du clavier, l'envoi d'un formulaire... En React, on écoute un événement en passant une fonction à une prop spéciale : onClick pour le clic, onChange pour la saisie, etc. Notez la casse camelCase : onClick avec un C majuscule, et non onclick comme en HTML.

function AlertButton() {
  function handleClick() {
    alert("Bouton cliqué !");
  }

  return (
    <button onClick={handleClick}>
      Cliquez ici
    </button>
  );
}

Deuxième outil de cette leçon : le rendu conditionnel, c'est-à-dire afficher des choses différentes selon une condition. Comme un panneau de magasin qui indique « Ouvert » ou « Fermé », un composant peut choisir son affichage. L'outil le plus courant est l'opérateur ternaire : condition ? valeurSiVrai : valeurSiFaux, une écriture compacte du « si... sinon... ».

function Status({ isLoggedIn }) {
  return (
    <p>
      {isLoggedIn ? "Bienvenue !" : "Connectez-vous."}
    </p>
  );
}

Et pour afficher quelque chose ou rien du tout ? On utilise l'opérateur && : dans condition && element, l'élément ne s'affiche que si la condition est vraie. Si elle est fausse, React n'affiche simplement rien, sans erreur.

function Cart({ itemCount }) {
  return (
    <div>
      <h3>Mon panier</h3>
      {itemCount > 0 && <p>{itemCount} article(s)</p>}
    </div>
  );
}

Quiz de validation

Vérifiez que vous avez bien retenu les points clés de cette leçon.

1. Quelle prop utilise-t-on pour réagir à un clic en React ?
   • onclick
   • onClick
   • clickEvent
2. Pourquoi écrire onClick={handleClick} sans parenthèses ?
   • Parce que les parenthèses sont interdites en JSX
   • Pour que la page se charge plus rapidement
   • Pour que la fonction s'exécute au clic, pas à l'affichage
3. Que s'affiche-t-il avec {isVisible && <p>Info</p>} si isVisible vaut false ?
   • Rien du tout
   • Le paragraphe Info s'affiche quand même
   • React affiche un message d'erreur