Loginė reikšmė būsenoje React

Sukurkime būseną inCart, kuri rodys, ar produktas yra krepšelyje, ar ne:

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

Tegul reikšmė false reiškia, kad produktas nėra krepšelyje, o reikšmė true - kad yra krepšelyje. Išveskime šią informaciją naudodami ternarinį operatorių:

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    <span>{inCart ? 'krepšelyje' : 'nėra krepšelyje'}</span>
  </div>;
}

Dabar sukurkime mygtuką, kurį paspaudus produktas bus pridėtas į krepšelį:

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    <span>{inCart ? 'krepšelyje' : 'nėra krepšelyje'}</span>
    <button onClick={() => setInCart(true)}>btn</button>
  </div>;
}

Modifikuokime mūsų kodą taip, kad pirmas paspaudimas ant mygtuko pridėtų į krepšelį, o antras - pašalintų iš jo:

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    <span>{inCart ? 'krepšelyje' : 'nėra krepšelyje'}</span>
    <button onClick={() => setInCart(!inCart)}>btn</button>
  </div>;
}