Wartość logiczna w stanie w React

Stwórzmy stan inCart, który będzie pokazywał, czy produkt jest w koszyku, czy nie:

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

Niech wartość false oznacza, że produkt nie jest w koszyku, a wartość true - że jest w koszyku. Wyświetlmy informację o tym za pomocą operatora trójargumentowego:

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

A teraz zróbmy przycisk, po kliknięciu którego produkt zostanie dodany do koszyka:

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

Zmodyfikujmy nasz kod tak, aby pierwsze kliknięcie na przycisk dodawało do koszyka, a drugie - usuwało z niego:

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