Logična vrednost v stanju v React

Ustvarimo stanje inCart, ki bo pokazalo, ali je izdelek v košarici ali ne:

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

Naj vrednost false pomeni, da izdelek ni v košarici, in vrednost true - da je v košarici. Prikažimo te informacije s pomočjo ternarnega operatorja:

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    <span>{inCart ? 'v košarici' : 'ni v košarici'}</span>
  </div>;
}

Zdaj pa naredimo gumb, ob kliku na katerega se bo izdelek dodal v košarico:

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    <span>{inCart ? 'v košarici' : 'ni v košarici'}</span>
    <button onClick={() => setInCart(true)}>btn</button>
  </div>;
}

Modificirajmo našo kodo tako, da bo prvi klik na gumb dodal v košarico, drugi klik pa odstranil iz nje:

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    <span>{inCart ? 'v košarici' : 'ni v košarici'}</span>
    <button onClick={() => setInCart(!inCart)}>btn</button>
  </div>;
}