Valeur booléenne dans l'état dans React

Créons un état inCart qui montrera si le produit est dans le panier ou non :

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

Laissons la valeur false signifier que le produit n'est pas dans le panier, et la valeur true - qu'il est dans le panier. Affichons cette information à l'aide d'un opérateur ternaire :

function App() {
	const [inCart, setInCart] = useState(false);
	
	return <div>
		<span>{inCart ? 'dans le panier' : 'pas dans le panier'}</span>
	</div>;
}

Et maintenant, créons un bouton qui, lorsqu'on clique dessus, ajoutera le produit au panier :

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

Modifions notre code pour que le premier clic sur le bouton ajoute au panier, et le second - le retire du panier :

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

Créez un bouton dont le clic bannira l'utilisateur et un bouton dont le clic débannira l'utilisateur.

Modifiez la tâche précédente pour que des deux boutons, seul celui qui correspond soit toujours visible. C'est-à-dire que si l'utilisateur est banni, alors le bouton pour débannir est visible, et s'il n'est pas banni - le bouton pour bannir.