Vlera Boolean në State në React

Le të krijojmë një state inCart i cili do të tregojë nëse produkti është në shportë apo jo:

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

Le të thotë vlera false që produkti nuk është në shportë, dhe vlera true - që është në shportë. Le ta shfaqim këtë informacion me ndihmën e operatorit ternar:

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    <span>{inCart ? 'në shportë' : 'jo në shportë'}</span>
  </div>;
}

Tani le të bëjmë një buton, klikimi i të cilit do ta shtojë produktin në shportë:

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

Le ta modifikojmë kodin tonë në mënyrë që klikimi i parë në buton ta shtojë në shportë, dhe i dyti - ta heqë atë prej andej:

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