[ReactJS] ใช้ if statement ใน JSX ไม่ได้ แล้วจะใช้อะไรแทน

Photo by Samuel Zeller on Unsplash

ก่อนอ่านเนื้อหาด้านล่าง อยากจะบอกว่า

• บทความนี้ไม่เหมาะอย่างยิ่ง สำหรับคนที่ไม่รู้ว่า Javascript คืออะไร
• บทความนี้ไม่เหมาะอย่างยิ่ง สำหรับคนที่ไม่รู้ว่า ReactJS เป็นใคร
• บทความนี้ไม่เหมาะอย่างยิ่ง สำหรับคนที่รู้เรื่องนี้ตั้งนานแล้วโว้ยยยยย…

ReactJS Tutorial Part I: Learn ReactJS For Free | Codecademy

จากการที่ผมได้ลองเล่น ReactJS ใน codecademy มีบทหนึ่งกล่าวถึงเรื่อง JSX Conditionals ในหัวข้อ JSX Conditionals: If Statements That Don't Work จังหวะนั้นใจแป้วเลยครับ ไม่ใช้ If แล้วจะใช้อะไรวะ เลยนั่งอ่านต่อไป ได้คำตอบมาว่า ก็มีวิธีอื่นอีกเยอะแยะ ที่ใช้ได้ เดี๋ยวจะทำให้เด็กมันดูสักนิดหน่อย

ส่วนสาเหตุว่าทำไมใช้ If ไม่ได้นั้น codecademy บอกว่ายังไม่จำเป็นต้องรู้ แต่ถ้าอยากรู้ ก็ไปอ่านเอา ที่ี่นี่ ส่วนผมไปค้นเพิ่มมา ได้ความว่า “ if-else statements don’t work inside JSX. This is because JSX is just syntactic sugar for function calls and object construction.” JSX เป็นเพียงผงชูรส ช่วยเสริมเติมแต่งรสชาติให้กับการเรียกใช้งาน Javascript function และโครงสร้างของ Object ให้อ่านง่าย ใช้คล่องเท่านั้น ลองดูตัวอย่างนะครับ

จะเห็นว่าหากเราใช้ If ใน JSX แล้ว เมื่อ JSX ถูกแปลงไปเป็น JS จะทำให้ JS นั้นผิด Syntax ทันที ถ้าหายสงสัยแล้วว่าทำไมถึงใช้ If ใน JSX ไม่ได้ ก็ไปดูกันต่อครับ ว่าเราจะใช้อะไรแทน

1. เมื่อใช้ if statement ใน JSX tag ไม่ได้ ก็ใช้มันข้างนอกนี่หล่ะ วิธีนี้เราใช้ If else ภายนอก JSX tag ซึ่งจากตัวอย่างก็คือ if else ดักครอบ img tag ไว้ซะเลย

2. ใช้ Ternary Operator แทน if else ซึ่งหลายๆคนก็ใช้เป็นประจำอยู่แล้วใน JS ลองดูตัวอย่างเลยละกันนะครับ

3. ใช้ && Operator ลองดูตัวอย่างง่ายๆ จาก code เลยละกันนะครับ ในบรรทัดที่ 13 จะเห็นว่าเราเอาค่า judgmental มาใช้ร่วมกับ && Operator เพื่อให้ <li>Nacho Cheez Straight Out The Jar</li> แสดงผลหาก !judgmental เป็น true นั่งเอง

ลองเอาเทคนิคทั้งสามอย่างไปปรับใช้กับ React Code ของเพื่อนๆ ดูนะครับ มีข้อเสนอแนะอะไร ก็บอกกล่าวกันมาได้นะครับ :)

Reference

• https://react-cn.github.io/react/tips/if-else-in-JSX.html
• https://www.codecademy.com/learn/react-101