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>;
}

Пайдаланушыны банға салатын және баннан шығаратын түймелерді жасаңыз.

Алдыңғы тапсырманы сәйкес түйме әрқашан көрінетіндей етіп өзгертіңіз. Яғни, егер пайдаланушы банда болса, онда баннан шығару түймесі көрінеді, ал егер банда болмаса - банға салу түймесі көрінеді.