Logička vrednost u stanju u React-u

Napravimo stanje inCart koje će pokazivati da li je proizvod u korpi ili ne:

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

Neka vrednost false znači da proizvod nije u korpi, a vrednost true - da je u korpi. Prikažimo ovu informaciju pomoću ternarnog operatora:

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    <span>{inCart ? 'u korpi' : 'nije u korpi'}</span>
  </div>;
}

A sada napravimo dugme čijim će se klikom proizvod dodati u korpu:

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    <span>{inCart ? 'u korpi' : 'nije u korpi'}</span>
    <button onClick={() => setInCart(true)}>btn</button>
  </div>;
}

Modifikujmo naš kôd tako da prvi klik na dugme dodaje u korpu, a drugi - uklanja iz nje:

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    <span>{inCart ? 'u korpi' : 'nije u korpi'}</span>
    <button onClick={() => setInCart(!inCart)}>btn</button>
  </div>;
}