Conditional Rendering — CompileDaily Study

Penjelasan

Karena JSX adalah ekspresi JavaScript, percabangan tampilan dilakukan memakai fitur JavaScript biasa: ternary (kondisi ? a : b) untuk memilih salah satu dari dua elemen, dan operator && untuk menampilkan elemen HANYA kalau kondisinya true (kalau false, tidak menampilkan apa-apa).

Contoh Konsep

function StatusPesanan({ sudahBayar, jumlahItem }) {
    return (
        <div>
            {sudahBayar ? <p>Pesanan sudah dibayar</p> : <p>Menunggu pembayaran</p>}

            {jumlahItem > 0 && <p>Ada {jumlahItem} item di keranjang</p>}
        </div>
    );
}

Praktikum

Buat komponen BadgeStok yang menerima props stok (number). Pakai ternary untuk menampilkan "Tersedia" (hijau) atau "Habis" (merah), dan operator && untuk menampilkan peringatan "Stok menipis!" HANYA kalau stok kurang dari 5 dan lebih dari 0.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Hati-hati memakai && dengan angka sebagai kondisi (mis. {jumlahItem && <p>...</p>}) — kalau jumlahItem bernilai 0, React akan menampilkan ANGKA 0 secara harfiah di layar (karena 0 falsy tapi tetap dirender sebagai teks), bukan menyembunyikan elemennya. Solusinya, pakai perbandingan eksplisit seperti {jumlahItem > 0 && ...}.