Логичка вредност во состојбата во React

Ајде да направиме состојба inCart, која ќе покажува дали производот е во кошничката или не:

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

Нека вредноста false значи дека производот не е во кошничката, а вредноста true - дека е во кошничката. Да ја прикажеме информацијата за ова со помош на тернарниот оператор:

function App() {
	const [inCart, setInCart] = useState(false);
	
	return <div>
		<span>{inCart ? 'во кошничка' : 'не е во кошничка'}</span>
	</div>;
}

А сега да направиме копче, при кликнување на кое производот ќе се додаде во кошничката:

function App() {
	const [inCart, setInCart] = useState(false);
	
	return <div>
		<span>{inCart ? 'во кошничка' : 'не е во кошничка'}</span>
		<button onClick={() => setInCart(true)}>btn</button>
	</div>;
}

Да го модифицираме нашиот код така што првото кликнување на копчето да додава во кошничката, а второто - да отстранува од неа:

function App() {
	const [inCart, setInCart] = useState(false);
	
	return <div>
		<span>{inCart ? 'во кошничка' : 'не е во кошничка'}</span>
		<button onClick={() => setInCart(!inCart)}>btn</button>
	</div>;
}

Направете копче, кликнување на кое ќе го блокира корисникот и копче, кликнување на кое ќе го одблокира корисникот.

Модифицирајте ја претходната задача така што од двете копчиња секогаш ќе биде видливо само соодветното. Односно, ако корисникот е блокиран, тогаш е видливо копчето за одблокирање, а ако не е блокиран - копчето за блокирање.