State : une app qui se souvient

Pourquoi une variable simple ne suffit pas

Au Niveau 2, tu as construit un compteur en réécrivant toi-même le texte du bouton après chaque clic. React fait autrement : tu changes les données, et React redessine l’écran. Mais tu dois confier les données à une boîte spéciale appelée state – sinon React ne remarquera pas le changement.

Montre-moi : un compteur en React

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked: {count}×
    </button>
  );
}

export default Counter;

Décortiquons la ligne la plus importante – const [count, setCount] = useState(0); :

• useState(0) – « React, prépare-moi une boîte avec une valeur de départ de 0. »
• count – la valeur actuelle dans la boîte (lecture seule).
• setCount – la seule façon correcte de changer la valeur. Quand tu appelles setCount(5), React sauvegarde la nouvelle valeur et redessine partout où count est utilisé, tout seul.

Et onClick={...} est la version React de addEventListener("click", ...) – directement dans le JSX.

Remarque ce qui n’est pas dans le code : pas de getElementById, pas de textContent. Tu ne dis pas comment changer l’écran – tu dis ce qui est vrai maintenant (count vaut maintenant 5), et l’écran s’aligne tout seul.

Montre-moi : le state contrôle ce qui est visible

Le state n’a pas besoin d’être juste un nombre. Une section repliable, à la manière React :

import { useState } from 'react';

function Menu() {
  const [open, setOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setOpen(!open)}>
        {open ? "Hide the menu ▲" : "Show the menu ▼"}
      </button>

      {open && (
        <ul>
          <li>Monday: tomato soup with pasta</li>
          <li>Tuesday: chicken with rice</li>
          <li>Wednesday: pancakes with jam</li>
        </ul>
      )}
    </div>
  );
}

Deux nouveaux trucs JSX :

• condition ? A : B – if/else raccourci directement dans le HTML : « si c’est ouvert, montre ça, sinon ça. »
• condition && (...) – « affiche ça seulement si la condition est vraie. » Quand open est faux, la liste n’existe tout simplement pas.

Et !open signifie « l’inverse » – ça transforme vrai en faux et vice versa. Une ligne = un interrupteur.

À toi 💪

Ajoute deux choses avec du state à ton app :

1. Une section repliable (un state true/false) correspondant à ton projet : 🏫 un menu de cantine repliable · 🙋 « montrer/cacher mes jeux préférés » · 🌍 une liste de pays repliable · ⚽ un effectif repliable.
2. Un compteur ou un vote (un state numérique) : 🏫 vote pour le voyage de classe · 🙋 « combien de personnes m’ont salué aujourd’hui » · 🌍 compteur de pays visités · ⚽ un tableau de score avec des boutons +1 domicile / +1 extérieur (deux states !).

import { useState } from 'react';

function Score() {
  const [home, setHome] = useState(0);
  const [away, setAway] = useState(0);

  return (
    <div className="card">
      <h3>Riverside {home} : {away} Lakeside</h3>
      <button onClick={() => setHome(home + 1)}>Home goal ⚽</button>
      <button onClick={() => setAway(away + 1)}>Away goal 😤</button>
      <button onClick={() => { setHome(0); setAway(0); }}>New match</button>
    </div>
  );
}

export default Score;

Ce que tu retiens de cette leçon

• const [value, setValue] = useState(start) – la mémoire d’un composant.
• Change-le seulement via setValue(...) – React redessine ensuite tout seul.
• En JSX : onClick={...}, les conditions ? : et && contrôlent ce qui est visible.

© 2026 Ing. Martin Polak / AlgoRhino · Conditions d'utilisation du contenu