ค่าบูลีนในสเตทของ 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>;
}

สร้างปุ่มที่เมื่อกดจะแบนผู้ใช้ และปุ่มที่เมื่อกดจะยกเลิกการแบนผู้ใช้

ปรับเปลี่ยนโจทย์ก่อนหน้าให้จากสองปุ่ม จะเห็นเพียงปุ่มที่ตรงกับสถานะเท่านั้น นั่นคือ หากผู้ใช้ถูกแอน จะเห็นปุ่มสำหรับยกเลิกการแบน แต่ถ้าไม่ถูกแบน จะเห็นปุ่มสำหรับแบน