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

Колдонуучуну бан кылуучу жана колдонуучуну бандан бошотуучу баскычтарды жасаңыз.

Мурунку тапшырманы өзгөртүңүз, эки баскычтан ар дайым тиешелүүсү гана көрүнсүн. Башкача айтканда, эгер колдонуучу банда болсо, анда бандан бошото турган баскыч көрүнсүн, ал эми банда болбосо - бан кыла турган баскыч көрүнсүн.