Latihan 2: Menampilkan List — React

Latihan 2 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 siswa berisi 3 object ({ id: 1, name: "Andi" }, { id: 2, name: "Budi" }, { id: 3, name: "Citra" }), dan <div> pembungkus. Biarkan semuanya.

Di dalam <div> pembungkus, tulis {siswa.map(...)}.
Untuk tiap siswa, kembalikan <div className="student"> yang isinya cuma nama siswa itu, s.name.
Pakai id sebagai key: key={s.id}.

Yang dicek:

minimal 3 elemen dengan class student
kodenya menulis key={s.id}, key dari id siswanya
.student pertama berisi persis Andi, dan .student terakhir berisi persis Citra

Di JSX, atribut class ditulis className. Jangan taruh elemen lain di dalam <div> pembungkus, karena .student pertama dan terakhir dibaca dari anak pertama dan anak terakhirnya.

Hint

Satu siswa jadi satu <div class="student">. Ubah array siswa jadi elemen dengan map.
Callback map menerima satu object siswa, misalnya s. Namanya ada di s.name dan id-nya di s.id. Di JSX, class ditulis className.
{siswa.map((s) => <div className="student" key={s.id}>{s.name}</div>)}

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 2: Menampilkan List — React

Hint

Memperbarui Aplikasi