Տրամաբանական արժեքը սթեյթում 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>;
}

Ստեղծեք կոճակ, որի սեղմումը կարող է արգելափակել օգտատիրոջը և կոճակ, որի սեղմումը կարող է հանել օգտատիրոջ արգելափակումը:

Փոփոխեք նախորդ առաջադրանքն այնպես, որ երկու կոճակներից միշտ տեսանելի լինի միայն համապատասխանը: Այսինքն, եթե օգտատերը արգելափակված է, ապա տեսանելի է արգելափակումը հանելու կոճակը, իսկ եթե արգելափակված չէ - արգելափակելու կոճակը: