Lompat ke konten utama
←

React Dasar

Pelajaran 8 dari 17

Props, render bersyarat, dan daftar

Misi: katalog toko kelontong

Setelah pelajaran ini kamu bisa menyusun katalog dari data: kartu barang dengan props dan render bersyarat, katalog tersaring ber-key, dan rak pembungkus dengan children.

±16 menitDiperiksa 24 Okt 2026

Latihan di pelajaran ini butuh akun gratis. Progres, kode, dan catatanmu hanya tersimpan di browser ini. Masuk untuk menyimpannya

Materi

Toko Kelontong Sumber Rejeki di Malang menyiapkan katalog daring sederhana. Data barang berasal dari larik BARANG berisi id, nama, harga, stok, dan kategori. Kartu setiap barang menampilkan nama, harga, dan keterangan stok; katalog bisa disaring menurut kategori; dan setiap kategori tampil di rak berjudul yang menyebut jumlah barangnya.

const BARANG = [
  { id: 101, nama: "Beras pandan wangi 5 kg", harga: 78000, stok: 12, kategori: "sembako" },
  { id: 102, nama: "Minyak goreng 2 L", harga: 36000, stok: 0, kategori: "sembako" },
  { id: 205, nama: "Sabun cuci piring 750 ml", harga: 14500, stok: 3, kategori: "kebersihan" },
  { id: 310, nama: "Kopi bubuk 200 g", harga: 21000, stok: 25, kategori: "minuman" },
];

Latihan

0/4 lulus

Misi akhir modul: luluskan minimal 4 dari 4 tugas. Jawaban diperiksa di server. Lulus berarti kamu memahami contohnya, bukan penilaian seluruh pekerjaanmu.

Latihan 4 dari 4

KartuBarang dirender dengan <KartuBarang key={b.id} nama={b.nama} />, dan di dalamnya menampilkan nomor barang dengan {props.key}. Apa yang tampil sebagai nomor?

Pilih satu jawaban

Catatanmu

Memuat catatan…

tersimpan otomatis, ikut tercetak · 0/4.000

Luluskan semua latihan dulu untuk menandai pelajaran ini selesai.

Lanjutkan ke

Tampilkan 1 lagi