Булева стойност в състоянието в 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>;
}

Направете бутон, натискането на който ще блокира потребителя и бутон, натискането на който ще деблокира потребителя.

Модифицирайте предходната задача така, че от двата бутона винаги да се вижда само съответният. Тоест, ако потребителят е блокиран, да се вижда бутон за деблокиране, а ако не е блокиран - за блокиране.