Logička vrednost u stanju u React-u

Napravimo stanje inCart koje će pokazivati da li je proizvod u korpi ili ne:

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

Neka vrednost false znači da proizvod nije u korpi, a vrednost true - da je u korpi. Prikažimo ovu informaciju pomoću ternarnog operatora:

function App() {
	const [inCart, setInCart] = useState(false);
	
	return <div>
		<span>{inCart ? 'u korpi' : 'nije u korpi'}</span>
	</div>;
}

A sada napravimo dugme čijim će se klikom proizvod dodati u korpu:

function App() {
	const [inCart, setInCart] = useState(false);
	
	return <div>
		<span>{inCart ? 'u korpi' : 'nije u korpi'}</span>
		<button onClick={() => setInCart(true)}>btn</button>
	</div>;
}

Modifikujmo naš kôd tako da prvi klik na dugme dodaje u korpu, a drugi - uklanja iz nje:

function App() {
	const [inCart, setInCart] = useState(false);
	
	return <div>
		<span>{inCart ? 'u korpi' : 'nije u korpi'}</span>
		<button onClick={() => setInCart(!inCart)}>btn</button>
	</div>;
}

Napravite dugme čiji će klik banovati korisnika i dugme čiji će klik odbanovati korisnika.

Modifikujte prethodni zadatak tako da od dva dugmeta uvek bude vidljivo samo odgovarajuće. To jest, ako je korisnik banovan, onda je vidljivo dugme za odbanovanje, a ako nije banovan - za banovanje.