React : Événements et rendu conditionnel

Le state donne de la mémoire à un composant. Les événements la font changer, et le rendu conditionnel adapte l'affichage en conséquence. C'est le trio qui rend une interface vivante.

# Réagir aux événements

En React, on attache un gestionnaire directement dans le JSX, en camelCase, en lui passant une fonction :

function Bouton() {
  function gererClic() {
    console.log("Cliqué !");
  }
  return <button onClick={gererClic}>Clique</button>;
}

function Bouton() {

  function gererClic() {

    console.log("Cliqué !");

  }

  return <button onClick={gererClic}>Clique</button>;

}

Les plus courants : onClick, onChange (saisie), onSubmit (envoi de formulaire).

# Lire une saisie avec onChange

Coupler un onChange au state, c'est la base d'un champ contrôlé (dont la valeur est pilotée par React) :

function Recherche() {
  const [texte, setTexte] = useState("");

  return (
    <>
      <input value={texte} onChange={(e) => setTexte(e.target.value)} />
      <p>Tu cherches : {texte}</p>
    </>
  );
}

function Recherche() {

  const [texte, setTexte] = useState("");

  return (

    <>

      <input value={texte} onChange={(e) => setTexte(e.target.value)} />

      <p>Tu cherches : {texte}</p>

    </>

  );

}

L'objet e (l'événement) porte la valeur saisie dans e.target.value. À chaque frappe : setTexte → re-rendu → l'affichage suit.

# Empêcher le comportement par défaut

Certains éléments ont un comportement natif : un formulaire recharge la page à l'envoi. e.preventDefault() l'en empêche :

function Formulaire() {
  function gererEnvoi(e) {
    e.preventDefault(); // sans ça, la page se recharge
    console.log("Envoyé");
  }
  return <form onSubmit={gererEnvoi}>{/* ... */}</form>;
}

function Formulaire() {

  function gererEnvoi(e) {

    e.preventDefault(); // sans ça, la page se recharge

    console.log("Envoyé");

  }

  return <form onSubmit={gererEnvoi}>{/* ... */}</form>;

}

# Le rendu conditionnel

Afficher, ou non, selon l'état. Trois techniques selon le cas.

Le ternaire - choisir entre deux rendus :

{connecte ? <Profil /> : <BoutonConnexion />}

{connecte ? <Profil /> : <BoutonConnexion />}

Le && - afficher quelque chose ou rien :

{erreur && <p className="erreur">{erreur}</p>}

{erreur && <p className="erreur">{erreur}</p>}

On retrouve le court-circuit vu en JavaScript : si erreur est falsy, rien n'est rendu.

Le early return - sortir tôt du composant :

function Profil({ utilisateur }) {
  if (!utilisateur) return <p>Chargement...</p>;
  return <h1>{utilisateur.nom}</h1>;
}

function Profil({ utilisateur }) {

  if (!utilisateur) return <p>Chargement...</p>;

  return <h1>{utilisateur.nom}</h1>;

}

# Tout ensemble : un interrupteur

State + événement + rendu conditionnel, la boucle fondamentale de React :

function Interrupteur() {
  const [allume, setAllume] = useState(false);

  return (
    <button onClick={() => setAllume(!allume)}>
      {allume ? "🔆 Allumé" : "🌙 Éteint"}
    </button>
  );
}

function Interrupteur() {

  const [allume, setAllume] = useState(false);

  return (

    <button onClick={() => setAllume(!allume)}>

      {allume ? "🔆 Allumé" : "🌙 Éteint"}

    </button>

  );

}

Un clic inverse le state → React re-rend → l'affichage suit. Rien à synchroniser à la main.

# À retenir

• Les événements s'écrivent en camelCase et reçoivent une fonction (onClick={fn}, jamais fn()).
• onChange + state = lire une saisie ; e.preventDefault() bloque le comportement natif (rechargement d'un formulaire).
• Rendu conditionnel : le ternaire (deux cas), le && (afficher ou rien), le early return (sortir tôt).
• Attention au && avec un nombre : teste explicitement (length > 0).

Prochaine étape : synchroniser un composant avec l'extérieur - données, API, minuteurs - grâce au hook useEffect.