Logična vrednost v stanju v React

Ustvarimo stanje inCart, ki bo pokazalo, ali je izdelek v košarici ali ne:

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

Naj vrednost false pomeni, da izdelek ni v košarici, in vrednost true - da je v košarici. Prikažimo te informacije s pomočjo ternarnega operatorja:

function App() {
	const [inCart, setInCart] = useState(false);
	
	return <div>
		<span>{inCart ? 'v košarici' : 'ni v košarici'}</span>
	</div>;
}

Zdaj pa naredimo gumb, ob kliku na katerega se bo izdelek dodal v košarico:

function App() {
	const [inCart, setInCart] = useState(false);
	
	return <div>
		<span>{inCart ? 'v košarici' : 'ni v košarici'}</span>
		<button onClick={() => setInCart(true)}>btn</button>
	</div>;
}

Modificirajmo našo kodo tako, da bo prvi klik na gumb dodal v košarico, drugi klik pa odstranil iz nje:

function App() {
	const [inCart, setInCart] = useState(false);
	
	return <div>
		<span>{inCart ? 'v košarici' : 'ni v košarici'}</span>
		<button onClick={() => setInCart(!inCart)}>btn</button>
	</div>;
}

Naredite gumb, katerega klik bo blokiral uporabnika in gumb, katerega klik bo odblokiral uporabnika.

Modificirajte prejšnjo nalogo tako, da bo od obeh gumbov vedno viden le ustrezni. To pomeni, če je uporabnik blokiran, je viden gumb za odblokiranje, če pa ni blokiran - gumb za blokiranje.