Latihan 2: Conditional Rendering — React

Latihan 2 dari materi Conditional Rendering di React — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Starter-nya sudah punya komponen App dengan const items = ["A", "B", "C"] dan <div> pembungkus. Biarkan keduanya.

Di dalam <div>, tampilkan <p className="count"> hanya kalau items gak kosong: items.length > 0 && .... Boleh juga ternary atau if.
Isi <p> itu Jumlah: {items.length}.

Yang dicek:

.count berisi persis Jumlah: 3
kodenya punya syarat: &&, ternary ? :, atau if (
angkanya dibaca dari {items.length}, dan syaratnya memakai items.length yang sama, ditulis sebelum {items.length}. Jangan ketik angka 3.
syaratnya bukan items.length && ... saja

Tulis items.length > 0, bukan items.length saja: kalau list-nya kosong, items.length && ... menampilkan angka 0.

Hint

Elemen yang muncul cuma kalau syaratnya terpenuhi bisa ditulis dengan &&: syarat && elemen.
Syaratnya items.length > 0, dan angka di dalam <p> juga diambil dari items.length. Di JSX, class ditulis className.
{items.length > 0 && <p className="count">Jumlah: {items.length}</p>}

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 2: Conditional Rendering — React

Hint

Memperbarui Aplikasi