การใช้โอเปอเรเตอร์ && ใน JSX

เราอาจจำเป็นต้องแทรกข้อความ หากเงื่อนไขเป็นจริง และไม่ทำอะไรเลย หากเงื่อนไขเป็นเท็จ สิ่งนี้สามารถทำได้โดยใช้โอเปอเรเตอร์ &&

ลองดูการทำงานของมันผ่านตัวอย่าง ในโค้ดต่อไปนี้ หากค่าใน show เป็น true ย่อหน้าที่มีข้อความจะถูกแทรกเข้าไป แต่หากเป็น false จะไม่มีการแทรกอะไรเลย:

function App() {
	const show = true;
	
	return <div>
		{show && <p>text</p>}
	</div>;
}

มีโค้ดดังต่อไปนี้:

function App() {
	const isAuth = true;
	
	return <div>
		<p>คุณเข้าสู่ระบบแล้ว</p>
	</div>;
}

ทำให้ย่อหน้าที่มีข้อความที่ให้มา แสดงผลเฉพาะเมื่อ isAuth มีค่าเป็น true เท่านั้น