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

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

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

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

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