Logická hodnota ve stavu v React

Pojďme vytvořit stav inCart, který bude ukazovat, zda je produkt v košíku nebo ne:

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

Nechť hodnota false znamená, že produkt není v košíku, a hodnota true - že je v košíku. Zobrazme tuto informaci pomocí ternárního operátoru:

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

A nyní vytvořme tlačítko, jehož kliknutím se produkt přidá do košíku:

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

Upravme náš kód tak, aby první kliknutí na tlačítko přidalo do košíku, a druhé - odebralo z něj:

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

Vytvořte tlačítko, jehož kliknutí bude banovat uživatele a tlačítko, jehož kliknutí bude odbanovávat uživatele.

Upravte předchozí úkol tak, aby ze dvou tlačítek byla vždy vidět pouze příslušná. To znamená, pokud je uživatel zabanován, je vidět tlačítko pro odbanování, a pokud není zabanován - pro zabanování.