Valoarea booleană în starea din React

Să creăm starea inCart care va indica dacă produsul este în coș sau nu:

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

Fie valoarea false să însemne că produsul nu este în coș, iar valoarea true - că este în coș. Să afișăm această informație folosind operatorul ternar:

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    <span>{inCart ? 'în coș' : 'nu este în coș'}</span>
  </div>;
}

Și acum să facem un buton la click pe care produsul va fi adăugat în coș:

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    <span>{inCart ? 'în coș' : 'nu este în coș'}</span>
    <button onClick={() => setInCart(true)}>btn</button>
  </div>;
}

Să modificăm codul nostru astfel încât primul click pe buton să adauge în coș, iar al doilea - să elimine din el:

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    <span>{inCart ? 'în coș' : 'nu este în coș'}</span>
    <button onClick={() => setInCart(!inCart)}>btn</button>
  </div>;
}