State

State React

Pour manipuler le state avec react on peut utiliser la methode useState

Cette methode nous renvoie un tableau avec :

• une variable comportant le state
  • ici isClicked vaux false et ne peut pas etre modifier
• une fonction de modification du state
  • ici setIsClicked permet de modifier la valeur de isClicked pour la passer a true

1function toto() {
2  const [isClicked, setIsClicked] = useState(false);
3
4  const handleShowMessage = () => {
5    setIsClicked(true);
6  };
7
8  const handleHiddenMessage = () => {
9    setIsClicked(false);
10  };
11
12  return (
13    <div>
14      <h1>Bienvenue</h1>
15
16      {isClicked && <p>toto</p>}
17
18      <button type="button" onClick={handleShowMessage}>
19        Click pour afficher le message
20      </button>
21
22      <button type="button" onClick={handleHiddenMessage}>
23        Click pour retirer le message
24      </button>
25    </div>
26  );
27}
28
29export default toto;
30