Booleskt värde i state i React

Låt oss skapa ett state inCart som visar om produkten finns i varukorgen eller inte:

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

Låt värdet false betyda att produkten inte finns i varukorgen, och värdet true - att den finns i varukorgen. Låt oss visa denna information med hjälp av ett ternärt uttryck:

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

Och nu ska vi skapa en knapp som, när man klickar på den, lägger till produkten i varukorgen:

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

Låt oss modifiera vår kod så att det första klicket på knappen lägger till i varukorgen, och det andra tar bort den från varukorgen:

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

Skapa en knapp som, när man klickar på den, bannlyser användaren och en knapp som, när man klickar på den, avbannlyser användaren.

Modifiera den föregående uppgiften så att av de två knapparna alltid bara den relevanta är synlig. Det vill säga, om användaren är bannlyst, så är knappen för avbannlysning synlig, och om hen inte är bannlyst - knappen för bannlysning.