Gunakan peta untuk menampilkan data di dalam array

  • 5 menit

Anda akan sering menemukan diri Anda bekerja dengan kumpulan data yang disimpan dalam array. Meskipun bekerja dengan data array mirip dengan bekerja dengan objek lain, Anda memerlukan kemampuan untuk mengulang data dan menampilkannya kepada pengguna. Seperti yang mungkin Anda duga, Anda melakukan ini di JSX dengan menggunakan kode JavaScript. Secara khusus, Anda menggunakan map fungsi.

map memungkinkan Anda membuat salinan array yang dimodifikasi. Ini berguna ketika Anda perlu mengonversi nilai array untuk tujuan tampilan. Untuk menampilkan nilai kepada pengguna, Anda mengambil nilai dan menyematkannya di dalam elemen HTML. Ini adalah pekerjaan yang sempurna untuk map. Dengan map, Anda dapat membuat array baru yang terdiri dari HTML yang berisi nilai individual dalam array untuk ditampilkan.

Menggunakan map

map berperilaku mirip dengan perulangan for...of atau forEach metode. Ini berjalan sekali untuk setiap item dalam array. Perbedaan utamanya adalah menghasilkan array baru dengan nilai yang dikembalikan oleh fungsi yang diteruskan ke map.

Mari kita jelajahi map dengan melihat bagaimana Anda dapat membuat array baru dari array yang sudah ada dengan angka kuadrat. Mulailah dengan membuat array angka.

const numbers = [2, 5, 8];

selanjutnya gunakan map. map menerima fungsi dengan satu parameter. Parameter akan diatur ke nilai setiap angka dalam array asli. Anda akan membuat fungsi anonim untuk tujuan ini dengan menggunakan => sintaks panah atau lemak.

const squared = numbers.map((number) => {
    return number * number;
});

squared adalah array baru yang berisi angka asli kami kuadrat. Jika Anda menampilkannya dengan menggunakan console.log, Anda akan melihat hal berikut:

console.log(squared);
// Output: [4, 25, 64]

Akses indeks untuk menghasilkan kunci

Saat Anda menampilkan daftar di React, set kunci untuk setiap item. Ini memungkinkan React dan Anda untuk merujuk ke item individual yang saat ini ditampilkan, dan menghubungkannya kembali ke data terikat. Cara paling umum untuk menghasilkan kunci adalah dengan menggunakan indeks item dalam array.

Saat Anda menggunakan perulangan for, Anda secara inheren menghasilkan indeks sebagai bagian dari sintaksis. Saat Anda menggunakan map, Anda dapat mengakses indeks dengan menggunakan parameter kedua dalam fungsi delegasi. Parameter kedua secara otomatis diatur ke indeks saat ini.

const squared = numbers.map((number, index) => {
    console.log(`Processing item ${index + 1}`);
    return number * number;
});

peta dengan React

Seperti yang disorot dalam contoh sebelumnya, Anda mungkin biasanya menggunakan map untuk menampilkan daftar item. Perbedaan utamanya adalah daripada mengembalikan angka (seperti dalam contoh), Anda mengembalikan JSX. React memiliki pedoman bahwa semua item yang ditampilkan harus memiliki kunci. Jika item yang Anda tampilkan tidak memiliki kunci alami, biasanya menggunakan indeks. Misalnya, jika Anda ingin menampilkan angka kuadrat dalam div elemen, Anda bisa menggunakan yang berikut ini:

const squared = numbers.map((number, index) => {
    return (
        <div key={index}>{ number * number }</div>
    );
});

Anda dapat menggunakan squared dengan cara yang sama dengan variabel lain di JSX. Jika Anda menambahkan { squared } ke JSX di tempat lain, itu akan merender kumpulan div elemen dengan nomor yang diperbarui.