Thamani ya Kimantiki Katika Hali ya React

Wacha tufanye hali inCart, ambayo itaonyesha ikiwa bidhaa iko kwenye kikapu au la:

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

Wacha thamani false iweze kumaanisha kuwa bidhaa hayo kwenye kikapu, na thamani true - kuwa iko kwenye kikapu. Tuonyeshe taarifa kuhusu hili kwa kutumia kiendeshaji ternary:

function App() {
	const [inCart, setInCart] = useState(false);
	
	return <div>
		<span>{inCart ? 'kwenye kikapu' : 'si kwenye kikapu'}</span>
	</div>;
}

Sasa tufanye kifungo, ubonyeze ambao bidhaa itaongezwa kwenye kikapu:

function App() {
	const [inCart, setInCart] = useState(false);
	
	return <div>
		<span>{inCart ? 'kwenye kikapu' : 'si kwenye kikapu'}</span>
		<button onClick={() => setInCart(true)}>kifungo</button>
	</div>;
}

Wacha tubadilishe msimbo wetu ili ubonyezo wa kwanza kwenye kifungo kuongeze kwenye kikapu, na wa pili - kuondoa kutoka humo:

function App() {
	const [inCart, setInCart] = useState(false);
	
	return <div>
		<span>{inCart ? 'kwenye kikapu' : 'si kwenye kikapu'}</span>
		<button onClick={() => setInCart(!inCart)}>kifungo</button>
	</div>;
}

Fanya kifungo, ubonyeze ambao itakuwa kumkataza mtumiaji na kifungo, ubonyeze ambao kitamkomboa mtumiaji.

Badilisha shida iliyotangulia ili kutoka kwa vifungo viwili kila wakati ionekane tu inayofanana. Yaani, ikiwa mtumiaji amekatazwa, basi inaonekana kifungo cha kumkomboa, na ikiwa hakukatazwa - cha kumkataza.