การกลับค่าสำหรับเงื่อนไขแบบย่อใน JSX

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

ในตัวอย่างต่อไปนี้ หากใน hide มีค่าเป็น false จะมีการแทรกย่อหน้าพร้อมข้อความ:

function App() {
	const hide = false;
	
	return <div>
		{!hide && <p>text</p>}
	</div>;
}

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

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

จงทำให้ย่อหน้าที่มีข้อความที่กำหนดไว้นี้ แสดงเฉพาะเมื่อใน isAuth มีค่าเป็น false