Bekerja dengan logika dalam file JSX
JSX adalah kombinasi dari HTML dan JavaScript. Jika Anda menginginkan logika, seperti menentukan bagaimana atau seperti apa untuk menampilkan sesuatu, gunakan JavaScript. Anda dapat menggunakan pernyataan if...else, pernyataan case, atau logika Boolean lainnya.
Operator ternary
Salah satu cara paling populer untuk menyuntikkan logika Boolean ke dalam aplikasi adalah operator ternary. Operator ternary adalah cara singkat untuk membuat pernyataan if...else dalam satu baris kode. Ada tiga komponen sintaks terner: ekspresi Boolean, nilai yang dikembalikan jika ekspresi benar, dan nilai yang dikembalikan jika ekspresi salah.
Misalnya, jika Anda ingin menampilkan pesan jika angka genap atau ganjil, Anda dapat menulis hal berikut:
const number = 3;
console.log(number % 2 ? 'The number is odd' : 'The number is even');
Anda memulai ekspresi dengan nilai Boolean Anda (number % 2). Jika angkanya ganjil, nilai Boolean (sisanya) adalah 1, atau benar; nilai pertama (The number is odd) akan dikembalikan. Jika angkanya genap, sisanya adalah 0, sehingga nilai Boolean salah; nilai kedua (The number is even) akan dikembalikan. Kode sebelumnya menghasilkan pesan, The number is odd.
Ternary dan JSX
Anda dapat memanfaatkan sintaks ini untuk menentukan bagaimana nilai harus ditampilkan. Jika Anda ingin mengatur class dari elemen HTML secara dinamis berdasarkan nilai, Anda bisa menggunakan yang berikut ini:
<div className={ isComplete ? 'done' : 'normal' }>{ value }</div>
Catatan
Anda mungkin melihat atribut yang digunakan className bukan class. Ini karena kata class dicadangkan dalam JavaScript. Untuk menghindari membingungkan runtime bahasa umum, gunakan className sebagai gantinya.