Valore booleano nello stato in React
Creiamo uno stato inCart che
mostri se il prodotto è nel carrello o meno:
function 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:
function 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:
function 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:
function App() {
const [inCart, setInCart] = useState(false);
return <div>
<span>{inCart ? 'nel carrello' : 'non nel carrello'}</span>
<button onClick={() => setInCart(!inCart)}>btn</button>
</div>;
}
Crea un pulsante il cui clic banni l'utente e un pulsante il cui clic sbanni l'utente.
Modifica il task precedente in modo che dei due pulsanti sia sempre visibile solo quello corrispondente. Cioè, se l'utente è bannato, è visibile il pulsante per sbannare, e se non è bannato - quello per bannare.
