Latihan 1 dari materi Keys & Reconciliation 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 berisi 3 object ({ id: 1, nama: "Apel" }, { id: 2, nama: "Jeruk" }, { id: 3, nama: "Mangga" }), dan <ul id="list"> yang masih kosong. Biarkan semuanya.
<ul id="list">, ganti komentarnya dengan {buah.map(...)}.<li> yang isinya {b.nama}.key={b.id}.Hasilnya: <li key={b.id}>{b.nama}</li> untuk tiap buah.
Yang dicek:
<li> di dalam #list<li> pertama berisi persis Apel, yang kedua persis Jeruk, yang terakhir persis Mangga.map(, bukan diketik satu per satu<li> ditulis sebagai ekspresi {...}, langsung setelah tag pembukanya<li> punya key=, dan nilainya diambil dari data dengan kurung kurawal (key={b.id}), bukan angka yang diketik seperti key={1}
