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

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

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

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

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