Latihan 1 dari materi Menampilkan List di React — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Starter-nya sudah punya komponen App, array buah = ["Apel", "Mangga", "Jeruk"], dan <ul> yang masih kosong. Biarkan semuanya.
Di dalam <ul>, ganti komentarnya dengan {buah.map(...)}.
Callback-nya mengembalikan satu <li> untuk tiap buah, isinya nama buah itu. Kasih juga key, misalnya <li key={item}>{item}</li>.
Yang dicek:
ada <ul> yang berisi minimal 3 <li>
kodenya membuat list lewat .map(
teks <li> pertama persis Apel, yang kedua persis Mangga, yang terakhir persis Jeruk
Jangan ketik <li>Apel</li> satu per satu: isinya harus datang dari array buah.
Hint
Kamu mengubah tiap isi array jadi satu elemen. Method array untuk itu adalah map.
Tulis {buah.map(...)} di dalam <ul>. Callback-nya menerima satu buah dan mengembalikan satu <li>. Pakai kurung biasa supaya <li>-nya langsung dikembalikan.
{buah.map((item) => <li key={item}>{item}</li>)}
</>{ }.css=>#idfn()
Versi baru
HyperSheets
bagian dari BelajarWeb.dev
0%
Membuka gerbang…
HyperSheets
Memperbarui Aplikasi
Versi baru tersedia. Halaman akan dimuat ulang otomatis...