Logická hodnota ve stavu v React

Pojďme vytvořit stav inCart, který bude ukazovat, zda je produkt v košíku nebo ne:

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

Nechť hodnota false znamená, že produkt není v košíku, a hodnota true - že je v košíku. Zobrazme tuto informaci pomocí ternárního operátoru:

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    <span>{inCart ? 'v košíku' : 'není v košíku'}</span>
  </div>;
}

A nyní vytvořme tlačítko, jehož kliknutím se produkt přidá do košíku:

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    <span>{inCart ? 'v košíku' : 'není v košíku'}</span>
    <button onClick={() => setInCart(true)}>btn</button>
  </div>;
}

Upravme náš kód tak, aby první kliknutí na tlačítko přidalo do košíku, a druhé - odebralo z něj:

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    <span>{inCart ? 'v košíku' : 'není v košíku'}</span>
    <button onClick={() => setInCart(!inCart)}>btn</button>
  </div>;
}