Valoarea booleană în starea din React

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

function 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:

function 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ș:

function 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:

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

Creați un buton care la click va bani utilizatorul și un buton care la click va debani utilizatorul.

Modificați sarcina anterioară astfel încât dintre cele două butoane să fie întotdeauna vizibil doar cel corespunzător. Adică, dacă utilizatorul este banat, atunci este vizibil butonul pentru debanare, iar dacă nu este banat - pentru banare.