ლოგიკური მნიშვნელობა სტეითში 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>;
}