Valeur booléenne dans l'état dans React

Créons un état inCart qui montrera si le produit est dans le panier ou non :

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    
  </div>;
}

Laissons la valeur false signifier que le produit n'est pas dans le panier, et la valeur true - qu'il est dans le panier. Affichons cette information à l'aide d'un opérateur ternaire :

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    <span>{inCart ? 'dans le panier' : 'pas dans le panier'}</span>
  </div>;
}

Et maintenant, créons un bouton qui, lorsqu'on clique dessus, ajoutera le produit au panier :

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    <span>{inCart ? 'dans le panier' : 'pas dans le panier'}</span>
    <button onClick={() => setInCart(true)}>btn</button>
  </div>;
}

Modifions notre code pour que le premier clic sur le bouton ajoute au panier, et le second - le retire du panier :

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    <span>{inCart ? 'dans le panier' : 'pas dans le panier'}</span>
    <button onClick={() => setInCart(!inCart)}>btn</button>
  </div>;
}