Логичка вредност во состојбата во React

Ајде да направиме состојба inCart, која ќе покажува дали производот е во кошничката или не:

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

Нека вредноста false значи дека производот не е во кошничката, а вредноста true - дека е во кошничката. Да ја прикажеме информацијата за ова со помош на тернарниот оператор:

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    <span>{inCart ? 'во кошничка' : 'не е во кошничка'}</span>
  </div>;
}

А сега да направиме копче, при кликнување на кое производот ќе се додаде во кошничката:

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    <span>{inCart ? 'во кошничка' : 'не е во кошничка'}</span>
    <button onClick={() => setInCart(true)}>btn</button>
  </div>;
}

Да го модифицираме нашиот код така што првото кликнување на копчето да додава во кошничката, а второто - да отстранува од неа:

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    <span>{inCart ? 'во кошничка' : 'не е во кошничка'}</span>
    <button onClick={() => setInCart(!inCart)}>btn</button>
  </div>;
}