Логичка вредност у стању у 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>;
}