Logická hodnota v stave v React

Vytvorme stav inCart, ktorý bude ukazovať, či je produkt v košíku alebo nie:

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

Nech hodnota false znamená, že produkt nie je v košíku a hodnota true - že je v košíku. Vypíšme informáciu o tom pomocou ternárneho operátora:

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

A teraz vytvorme tlačidlo, po kliknutí na ktoré sa produkt pridá do košíka:

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

Upravme náš kód tak, aby prvé kliknutie na tlačidlo pridalo do košíka a druhé ho odstránilo:

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

Vytvorte tlačidlo, kliknutie na ktoré bude blokovať používateľa a tlačidlo, kliknutie na ktoré bude odblokovať používateľa.

Upravte predchádzajúcu úlohu tak, aby z dvoch tlačidiel bola vždy viditeľná len príslušná. To znamená, ak je používateľ zablokovaný, tak je viditeľné tlačidlo na odblokovanie, a ak nie je zablokovaný - na zablokovanie.