Logikai érték az állapotban Reactben

Készítsünk egy inCart állapotot, amely megmutatja, hogy a termék a kosárban van-e vagy sem:

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

Legyen a false érték azt jelentő, hogy a termék nincs a kosárban, a true érték pedig azt, hogy a kosárban van. Jelenítsük meg ezt az információt a ternáris operátor segítségével:

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    <span>{inCart ? 'a kosárban' : 'nincs a kosárban'}</span>
  </div>;
}

Most készítsünk egy gombot, amelyre kattintva a termék hozzáadódik a kosárhoz:

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    <span>{inCart ? 'a kosárban' : 'nincs a kosárban'}</span>
    <button onClick={() => setInCart(true)}>btn</button>
  </div>;
}

Módosítsuk a kódunkat úgy, hogy az első kattintás a gombon hozzáadja a kosárhoz, a második pedig eltávolítsa onnan:

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    <span>{inCart ? 'a kosárban' : 'nincs a kosárban'}</span>
    <button onClick={() => setInCart(!inCart)}>btn</button>
  </div>;
}