ლოგიკური მნიშვნელობა სტეითში 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)}>btn</button>
	</div>;
}

მოდით, შევცვალოთ ჩვენი კოდი ისე, რომ პირველმა დაჭერამ ღილაკზე დაამატოს კალათაში, ხოლო მეორემ - ამოიღოს იქიდან:

function App() {
	const [inCart, setInCart] = useState(false);
	
	return <div>
		<span>{inCart ? 'კალათაშია' : 'კალათაში არ არის'}</span>
		<button onClick={() => setInCart(!inCart)}>btn</button>
	</div>;
}

შექმენით ღილაკი, რომლის დაჭერაც დაბლოკავს მომხმარებელს და ღილაკი, რომლის დაჭერაც განბლოკავს მომხმარებელს.

შეცვალეთ წინა ამოცანა ისე, რომ ორი ღილაკიდან ყოველთვის მხოლოდ შესაბამისი იყოს ხილული. ანუ, თუ მომხმარებელი დაბლოკილია, ხილული იყოს განბლოკვის ღილაკი, ხოლო თუ არ არის დაბლოკილი - დაბლოკვის ღილაკი.