Mettez en place votre state local avec useState

Les données que nous rendons accessibles aux utilisateurs sont au cœur des applications. Dans la partie précédente, nous avons vu comment manipuler les props à travers les composants, pour les adapter en fonction des données à afficher.

Vous vous en doutez puisque c'est l'objet de ce chapitre : avec le state !

Découvrez les stateful components

Nous avions aperçu le state dans la partie précédente, mais c'est maintenant le moment de nous plonger dans le sujet.

Vous vous souvenez de notre composant Cart que nous avions créé dans la partie précédente ?

On retourne donc dans  Cart.jsx.

Pour le moment, nous allons uniquement permettre aux utilisateurs d'ajouter des monsteras dans leur panier, supprimons donc tout le reste.

Commençons par importer  useState  avec :

import { useState } from 'react'

Puis, on peut créer un state cart.

Avec  useState, nous devons déclarer en même temps une fonctionupdateCart pour mettre à jour ce state et lui attribuer une valeur initiale, qui sera ici de 0 :

const [cart, updateCart] = useState(0)

Je vais maintenant pouvoir ajouter un bouton dans mon panier qui permet d'ajouter un monstera avec la fonction que nous venons de déclarer.

Ce qui me donne dans  Cart.jsx  :

const Cart = () => {
  const monsteraPrice = 8
  const [cart, updateCart] = useState(0)

  return (
    <div className='lmj-cart'>
      <h2>Panier</h2>
      <div>
        Monstera : {monsteraPrice}€
        <button onClick={() => updateCart(cart + 1)}>
          Ajouter
        </button>
      </div>
      <h3>Total : {monsteraPrice * cart}€</h3>
    </div>
  )
}

export default Cart

Maintenant, si on clique sur "Ajouter", le montant total est modifié en fonction du nombre d'éléments sauvegardés dans le state du panier.

Bienvenue dans la magie du state ! Notre composant Cart est maintenant devenu un stateful component, grâce à useState. Concrètement, cela veut dire que le composant Cart peut être re-render autant de fois que nécessaire, mais la valeur du panier sera préservée.

Familiarisez-vous avec useState

useState  est un hook qui permet d'ajouter le state local React à des composants fonctions.

Après  useState, nous verrons un autre hook dans cette partie :  useEffect.

Nous l'avons déjà utilisé, mais je vous le remets ici :

const [cart, updateCart] = useState(0)

Investiguons comment est construit notre state cart.

Comprenez les crochets

Tout d'abord, les crochets  [].

useState  nous renvoie une paire de valeurs dans un tableau de 2 éléments, que nous récupérons dans les variables  cart  et  updateCart  dans notre exemple. Le premier élément est la valeur actuelle, et le deuxième est une fonction qui permet de la modifier.

Sans la décomposition, nous aurions aussi pu faire :

const cartState = useState(0)
const cart = cartState[0]
const updateCart = cartState[1]

Dans un tableau qu'on décompose, nous pouvons librement nommer nos variables. J'aurais tout aussi bien pu faire :

const [coucou, cavabien] = useState(0)

Initialisez votre state

Intéressons-nous maintenant au paramètre passé entre parenthèses à useState :  useState(0)  .

Comme je vous l'ai dit, il correspond à l'état initial de notre state. Cet état initial peut être un nombre comme ici, une string, un booléen, un tableau ou encore un objet avec plusieurs propriétés.

Créez plusieurs variables d'état

Nous allons encore améliorer notre panier. Cette fois-ci, je veux pouvoir choisir de l'afficher ou de le cacher. Pour ça, nous allons utiliser une variable d'état dans notre composant Cart.

Pas de panique. Il y a plusieurs moyens de faire. Mais le plus simple est d'utiliser plusieurs variables d'état.

Dans notre cas, il suffit de créer une variable  isOpen  associée avec la fonction  setIsOpen  et de l'initialiser àfalse  :

const [isOpen, setIsOpen] = useState(false)

Pour pouvoir interagir, on crée ensuite :

• un bouton pour ouvrir le panier qui sera le seul composant retourné par  Cart  si le panier est fermé ;

• et un bouton pour fermer le panier.

Cela nous donne le code suivant :

const Cart = () => {
  const monsteraPrice = 8
  const [cart, updateCart] = useState(0)
  const [isOpen, setIsOpen] = useState(false)

  return isOpen ? (
    <div className='lmj-cart'>
      <button onClick={() => setIsOpen(false)}>Fermer</button>
      <h2>Panier</h2>
      <div>
        Monstera : {monsteraPrice}€
        <button onClick={() => updateCart(cart + 1)}>
          Ajouter
        </button>
      </div>
      <h3>Total : {monsteraPrice * cart}€</h3>
    </div>
  ) : (
    <button onClick={() => setIsOpen(true)}>Ouvrir le Panier</button>
  )
}

Vous voyez ? Pas de soucis à créer plusieurs variables d'état dans un même composant ! Alors à vous de jouer ! 

À vous de jouer !

Pour ce chapitre, vous devrez créer un bouton "vider le panier" qui réinitialise le state de notre cart.

En résumé

• Le state local est présent à l'intérieur d'un composant : ce composant peut être re-render autant de fois que l'on veut, mais les données seront préservées.

• Un hook est une fonction qui permet de "se brancher" sur des fonctionnalités React.

• useStateest un hook qui permet d'ajouter le state local React à des fonctions composants :

  • Il nous renvoie une paire de valeurs dans un tableau de 2 valeurs, récupérée dans les variables entre crochets.

  • Il faut initialiser votre state avec un paramètre passé entre parenthèses – un nombre, une string, un booléen, un tableau ou même un objet.

Dans le prochain chapitre, nous allons pousser cette notion de state encore plus loin puisque nous allons apprendre à partager un state entre plusieurs composants. Ce sera l'occasion d'améliorer notre panier pour qu'il se mette à jour en fonction de la liste de plantes. Plus réaliste, n'est-ce pas ? Alors à tout de suite !