Логичка вредност у стању у 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>;
}

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

Модификујте претходни задатак тако да од две дугмети увек буде видљива само она која одговара. То јест, ако је корисник блокиран, онда је видљива дугме за деблокирање, а ако није блокиран - за блокирање.