Logisk værdi i state i React

Lad os lave en state inCart, som vil vise om produktet er i indkøbskurven eller ej:

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

Lad værdien false betyde, at produktet ikke er i indkøbskurven, og værdien true - at det er i indkøbskurven. Lad os vise information om dette ved hjælp af en ternær operator:

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

Og lad os nu lave en knap, der ved klik tilføjer produktet til indkøbskurven:

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

Lad os modificere vores kode, så det første klik på knappen tilføjer til indkøbskurven, og det andet klik - fjerner den fra indkøbskurven:

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

Lav en knap, hvor et klik vil banlyse en bruger og en knap, hvor et klik vil ophæve banlysningen af en bruger.

Modificer den forrige opgave, så der altid kun er synlig én af de to knapper af gangen. Det vil sige, hvis brugeren er bandlyst, skal kun knappen til ophævelse af banlysning være synlig, og hvis brugeren ikke er bandlyst - kun knappen til banlysning.