Loģiskā vērtība stāvoklī React

Izveidosim stāvokli inCart, kurš rādīs, vai produkts atrodas grozā vai nē:

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

Lai vērtība false nozīmē, ka produkts nav grozā, bet vērtība true - ka atrodas grozā. Izvadīsim informāciju par to ar ternārā operatora palīdzību:

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

Tagad izveidosim pogu, kuras nospiešana pievienos produktu grozam:

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

Modificēsim mūsu kodu tā, lai pirmā nospiešana uz pogas pievienotu grozā, bet otrā - noņemtu no tā:

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