Valore booleano nello stato in React

Creiamo uno stato inCart che mostri se il prodotto è nel carrello o meno:

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

Lascia che il valore false significhi che il prodotto non è nel carrello, e il valore true che è nel carrello. Visualizziamo questa informazione utilizzando un operatore ternario:

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

Ora creiamo un pulsante che, quando cliccato, aggiunga il prodotto al carrello:

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

Modifichiamo il nostro codice in modo che il primo clic sul pulsante aggiunga al carrello, e il secondo lo rimuova:

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