Қимати мантиқӣ дар стейт дар 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)}>тугма</button>
	</div>;
}

Рамзи моро тавре тағйир диҳем, ки аввалин пахш бар тугма ба сабад илова кунад, ва дуввумӣ - аз он ҳазф кунад:

function App() {
	const [inCart, setInCart] = useState(false);
	
	return <div>
		<span>{inCart ? 'дар сабад' : 'дар сабад нест'}</span>
		<button onClick={() => setInCart(!inCart)}>тугма</button>
	</div>;
}

Тугмаеро созед, ки пахш бар он корбарро банан кунад ва тугмаеро, ки пахш бар он корбарро аз бан озод кунад.

Вазифаи гузаштаро тавре тағйир диҳед, ки аз ду тугма ҳамеша фақат яке мувофиқ намоён бошад. Яъне, агар корбар банан карда шуда бошад, пас тугма барои озод кардани бан намоён бошад, ва агар банан нашуда бошад - барои банан кардан.