Wartość logiczna w stanie w React

Stwórzmy stan inCart, który będzie pokazywał, czy produkt jest w koszyku, czy nie:

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

Niech wartość false oznacza, że produkt nie jest w koszyku, a wartość true - że jest w koszyku. Wyświetlmy informację o tym za pomocą operatora trójargumentowego:

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

A teraz zróbmy przycisk, po kliknięciu którego produkt zostanie dodany do koszyka:

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

Zmodyfikujmy nasz kod tak, aby pierwsze kliknięcie na przycisk dodawało do koszyka, a drugie - usuwało z niego:

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

Stwórz przycisk, którego kliknięcie będzie banować użytkownika i przycisk, którego kliknięcie będzie odbanowywać użytkownika.

Zmodyfikuj poprzednie zadanie tak, aby z dwóch przycisków zawsze był widoczny tylko odpowiedni. To znaczy, jeśli użytkownik jest zbanowany, to widoczny jest przycisk do odbanowania, a jeśli nie jest zbanowany - do zbanowania.