Logická hodnota v stave v React

Vytvorme stav inCart, ktorý bude ukazovať, či je produkt v košíku alebo nie:

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

Nech hodnota false znamená, že produkt nie je v košíku a hodnota true - že je v košíku. Vypíšme informáciu o tom pomocou ternárneho operátora:

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

A teraz vytvorme tlačidlo, po kliknutí na ktoré sa produkt pridá do košíka:

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

Upravme náš kód tak, aby prvé kliknutie na tlačidlo pridalo do košíka a druhé ho odstránilo:

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