React'ta State'de Mantıksal Değer

Ürünün sepette olup olmadığını gösterecek inCart state'ini oluşturalım:

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

false değeri ürünün sepette olmadığını, true değeri ise sepette olduğunu göstersin. Bununla ilgili bilgiyi üçlü operatör kullanarak gösterelim:

function App() {
	const [inCart, setInCart] = useState(false);
	
	return <div>
		<span>{inCart ? 'sepette' : 'sepette değil'}</span>
	</div>;
}

Şimdi de tıklandığında ürünü sepete ekleyen bir buton yapalım:

function App() {
	const [inCart, setInCart] = useState(false);
	
	return <div>
		<span>{inCart ? 'sepette' : 'sepette değil'}</span>
		<button onClick={() => setInCart(true)}>btn</button>
	</div>;
}

Kodumuzu, ilk tıklamanın sepete eklediği, ikinci tıklamanın ise sepetten çıkardığı şekilde değiştirelim:

function App() {
	const [inCart, setInCart] = useState(false);
	
	return <div>
		<span>{inCart ? 'sepette' : 'sepette değil'}</span>
		<button onClick={() => setInCart(!inCart)}>btn</button>
	</div>;
}

Tıklandığında kullanıcıyı yasaklayan ve tıklandığında kullanıcının yasağını kaldıran bir buton yapın.

Önceki görevi, iki butondan her zaman yalnızca ilgili olanın görünür olduğu şekilde değiştirin. Yani, eğer kullanıcı yasaklıysa yasağı kaldırma butonu görünsün, yasaklı değilse yasaklama butonu görünsün.