Boolescher Wert im State in React

Lassen Sie uns einen State inCart erstellen, der anzeigt, ob sich das Produkt im Warenkorb befindet oder nicht:

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

Der Wert false bedeute, dass das Produkt sich nicht im Warenkorb befindet, und der Wert true, dass es im Warenkorb ist. Geben wir diese Information mit Hilfe des ternären Operators aus:

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    <span>{inCart ? 'im Warenkorb' : 'nicht im Warenkorb'}</span>
  </div>;
}

Erstellen wir nun einen Button, der bei Klick das Produkt zum Warenkorb hinzufügt:

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

Modifizieren wir unseren Code so, dass der erste Klick auf den Button zum Warenkorb hinzufügt und der zweite - aus ihm entfernt:

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