Valor booleano en el estado en React

Hagamos un estado inCart que muestre si el producto está en el carrito o no:

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

Dejemos que el valor false signifique que el producto no está en el carrito, y el valor true - que está en el carrito. Mostremos esta información usando el operador ternario:

function App() {
	const [inCart, setInCart] = useState(false);
	
	return <div>
		<span>{inCart ? 'en el carrito' : 'no en el carrito'}</span>
	</div>;
}

Y ahora hagamos un botón, al hacer clic en el cual el producto se agregará al carrito:

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

Modifiquemos nuestro código para que el primer clic en el botón agregue al carrito, y el segundo - lo elimine de él:

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

Haz un botón, cuyo clic baneé al usuario y un botón, cuyo clic desbaneé al usuario.

Modifica la tarea anterior para que de los dos botones siempre sea visible solo el correspondiente. Es decir, si el usuario está baneado, entonces es visible el botón para desbanear, y si no está baneado - el para banear.