การเขียนเงื่อนไข in React
ควบคุมสวิตช์เปิด-ปิดหน้าจออย่างเป็นขั้นตอน!

ในชีวิตประจำวัน ต้องเผชิญกับเงื่อนไขและการตัดสินใจอยู่ตลอดเวลา ตัวอย่างเช่น:

• ถ้า ฝนตก → จะ หยิบร่มติดตัวไปด้วย, แต่ถ้า ฝนไม่ตก → จะ เดินตัวเปล่าออกไป
• ถ้า ในบัญชีมีเงิน → จะ ซื้อชานมไข่มุกดื่มชื่นใจ, แต่ถ้า เงินหมด → จะ ดื่มน้ำเปล่าแทน

เมื่อเปลี่ยนจากชีวิตจริงมาเป็น "หน้าตาของแอปพลิเคชันหรือเว็บไซต์" เงื่อนไขเหล่านี้จำเป็นต้องถูกแปลงเป็นโค้ดเพื่อควบคุมหน้าจอ เช่น:

• ถ้า ผู้ใช้ยังไม่ได้ล็อกอิน → วาด ปุ่ม "เข้าสู่ระบบ (Login)" โชว์บนหน้าจอ
• ถ้า ผู้ใช้ล็อกอินสำเร็จแล้ว → ซ่อน ปุ่มล็อกอินทิ้ง แล้ว วาด "รูปโปรไฟล์และชื่อผู้ใช้" ขึ้นมาโชว์แทน
• ถ้า เว็บไซต์ยังโหลดข้อมูลไม่เสร็จ → วาด "วงกลมหมุนๆ โหลดดิ้ง (Spinner)" เพื่อให้ผู้ใช้รู้ว่าต้องรอก่อนนะ

{
  // 💥 เขียนแบบนี้กลางแท็ก HTML ใน React จะเกิด Error สีแดงทันที!
  if (isLoggedIn) {
    return <UserProfile />
  } else {
    return <LoginForm />
  }
}

เมื่อต้องการให้หน้าจอ "เลือกแสดงผลระหว่าง 2 ชิ้นสลับขั้วกัน" (เช่น สลับระหว่างหน้าต่างสำหรับสมาชิก กับหน้าต่างล็อกอินสำหรับคนทั่วไป) เครื่องมือที่เป็นสะพานเชื่อมที่ดีที่สุดคือ Ternary Operator (ตัวดำเนินการแบบสามส่วน)

ไวยากรณ์โครงสร้างมีลักษณะดังนี้:

ลองมาแกะโค้ดแบบเรียบง่ายและดูผลลัพธ์ไปทีละส่วน:

การเปลี่ยนสถานะผู้ใช้งานในระบบจริง
function WelcomeArea({ isLoggedIn }) {
  return (
    <div className="container">
      {/* 
        💡 แกะลอจิกทีละขั้น:
        1. ดูที่ตัวแปร 'isLoggedIn' ว่าเก็บค่า True หรือ False
        2. ถ้าเป็น True (ล็อกอินแล้ว) -> วาดแผงหน้ากากแสดงผลต้อนรับ <MemberPanel />
        3. ถ้าเป็น False (ยังไม่ได้ล็อกอิน) -> วาดฟอร์มล็อกอิน <LoginForm /> ทดแทนชิ้นแรก
      */}
      
      {isLoggedIn ? (
        <MemberPanel userRole="VIP" />
      ) : (
        <LoginForm />
      )}
    </div>
  );
}

// 🛡️ ถ้าตัวแปร showBanner เป็นจริง ให้โชว์ป้ายโฆษณา แต่ถ้าเป็นเท็จ ให้คืนค่า null (หน้าจอจะไม่แสดงส่วนใดขึ้นมาเลย)
{showBanner ? <PromoBanner /> : null}

บ่อยครั้งที่เราต้องการเขียนเงื่อนไขที่ไม่ได้มีการสลับขั้ว A/B แต่เป็นอารมณ์ประเภท "ถ้าจริงให้โชว์ปุ่มนี้ขึ้นมานะ แต่ถ้าไม่จริงก็ปล่อยให้ซ่อนเงียบหายไปเลย ไม่ต้องวาดอะไรมาสลับ"

ถ้าเราเลือกใช้สูตรแรกด้านบน เราอาจจะต้องเขียนโค้ดคอยคืนค่า `: null` ปิดท้ายตลอดเวลาแบบนี้:{isPremium ? <CrownBadge /> : null}ซึ่งหากเขียนบ่อยครั้ง โค้ดจะยาวและลดความอ่านง่ายลง

JavaScript จึงมีเครื่องมือทางลัดที่เรียกว่า Logical AND (เครื่องหมายแอมเพอร์แซนด์คู่ &&) โดยมีรูปแบบการใช้งานดังนี้:

ความรู้เบื้องหลังการทำงาน (หลักการข้ามสะพานตรวจด่าน):

คอมพิวเตอร์จะวิ่งเข้ามาตรวจจากฝั่งซ้ายมือสุดก่อนถ้าประเมินแล้วฝั่งซ้ายเป็นเท็จ (False) ด่านตรวจจะปิดสะพานทันที คอมพิวเตอร์จะหยุดทำงานและมองข้ามส่วนขวาไปเลย หน้าจอจึงซ่อนเงียบหายไปอย่างไร้ร่องรอย แต่ ถ้าตรวจแล้วฝั่งซ้ายเป็นจริง (True) คอมพิวเตอร์จะข้ามสะพานไปทำงานฝั่งขวาต่อ และคืนค่าชิ้นส่วน Component ส่งไปให้ React แสดงผลบนหน้าเว็บทันที

ตัวอย่างสติกเกอร์ VIP เปล่งแสงประกายในแอปจริง
function Dashboard({ user }) {
  return (
    <div className="profile-card">
      <h3>ชื่อผู้ใช้: {user.name}</h3>
      
      {/* 
        🛡️ แกะลอจิกทีละบรรทัด:
        1. ถ้า user.isPremium เป็น True -> ข้ามด่านไปวาดมงกุฎทองคำเปล่งประกาย ✨
        2. ถ้า user.isPremium เป็น False -> ด่านปิด สะพานขาด ซ่อนมงกุฎทันที
      */}
      {user.isPremium && <div className="gold-crown">👑 สมาชิกพรีเมียมระดับ VIP</div>}
      
      {/* ⚠️ แถบเตือนภัยสีแดงที่จะร่วงหล่นลงมาเฉพาะเมื่อระบบส่งสัญญาณขัดข้อง (hasError เป็น True) เท่านั้น */}
      {user.hasError && <div className="error-alert">🚨 ระบบขัดข้อง กรุณาเช็คอินเทอร์เน็ต!</div>}
    </div>
  );
}

นี่คือหลุมพรางหรือ Gotcha (กับดักโปรแกรมเมอร์) ที่ใหญ่และต้องระวังให้ดี หลายคนคิดว่าคำสั่ง && ใช้งานง่าย จึงนำไปดักจับความยาวของรายการสินค้าเพื่อซ่อนเมนูสินค้ากรณีไม่มีของขายในร้าน

เช่น เขียนโค้ดแบบลักไก่สั้นๆ แบบนี้:

// 🚨 เจตนา: อยากให้ซ่อนลิสต์อาหารถ้าอาร์เรย์รายการอาหารในร้านว่างเปล่า (ความยาวความยาวเท่ากับ 0)
{foodList.length && <FoodMenu data={foodList} />}

วิธีเอาตัวรอดจากหลุมพรางนี้อย่างงดงาม:

เราต้องใช้วิธี "เปรียบเทียบขนาดเพื่อให้คายผลลัพธ์เป็นค่าความจริงบูลีน (True หรือ False) แบบแท้จริง 100%"แทนการพึ่งพาตัวเลขตรงๆ:

// ✨ ปลอดภัยหายห่วง: เติมสัญลักษณ์เปรียบเทียบ > 0 เข้าไป
// เมื่อ foodList ว่างเปล่า (ความยาวเท่ากับ 0) ผลการคำนวณด้านซ้ายจะได้ค่าเป็น 'false' อย่างบริสุทธิ์
// ซึ่ง React จะซ่อนรายการและจะไม่แสดงตัวหนังสือเลข 0 ออกมาเลย
{foodList.length > 0 && <FoodMenu data={foodList} />}

ในโลกความเป็นจริง หน้าเว็บของเราบางจุดมีสถานะที่ซับซ้อนมากกว่าแค่เปิดหรือปิดแบบ 2 ขั้ว เช่น หน้าจอการทำธุรกรรมการเงินผ่านธนาคาร:

• ระดับที่ 1: กำลังโหลดส่งสลิปธนาคารอยู่หรือไม่? (ถ้าทำอยู่ → วาดสปินเนอร์รอ)
• ระดับที่ 2: เมื่อโหลดเสร็จแล้ว ตกลงโอนเงินผ่านระบบสำเร็จหรือไม่? (ถ้าใช่ → วาดป้ายติ๊กถูกเขียวสำเร็จ)
• ระดับที่ 3: ถ้าการโอนล้มเหลวผิดพลาด → วาดป้ายกากบาทสีแดงแจ้งข้อผิดพลาด

วิธีเขียนโค้ดซ้อนโครงสร้างสไตล์นี้เรียกว่า Nested Ternary (การเขียนซ้อนเงื่อนไขเป็นชั้นๆ) ลองแกะวงเล็บดูไปด้วยกัน:

โครงสร้าง Nested Ternary แบบอ่านง่ายจากซ้ายไปขวา
return (
  <div className="bank-status-card">
    {isLoading ? (
      <SpinLoader /> // 🌟 [ด่านแรก] ถ้ากำลังโหลดอยู่โชว์วงล้อหมุนทันที!
    ) : isSuccess ? (
      <SuccessTick /> // 🌟 [ด่านที่สอง] ถ้าโหลดเสร็จแล้ว และผลสำเร็จเป็นจริง โชว์เครื่องหมายติ๊กถูก
    ) : (
      <ErrorCross /> // 🌟 [ตัวเลือกสุดท้าย] ถ้าโหลดเสร็จแต่ผิดพลาด แสดงป้ายกากบาทสีแดงแจ้งข้อผิดพลาด
    )}
  </div>
);