Memahami Cara Render Larik di React

Pengantar

Artikel ini akan mengajari Anda cara merender larik di React dan praktik terbaik yang digunakan saat merender elemen berbeda di dalam komponen.

Salah satu keuntungan menggunakan bahasa web modern seperti JavaScript adalah Anda dapat mengotomatiskan pembuatan potongan HTML.

Dengan menggunakan sesuatu seperti loop terhadap larik atau objek, berarti Anda hanya perlu menulis HTML per item satu kali. Apa lagi, semua editan berikutnya hanya perlu diterapkan sekali.

Merender Beberapa Elemen Sekaligus

Untuk merender beberapa elemen JSX sekaligus di React, Anda dapat memproses sebuah larik dengan metode .map() dan mengembalikan elemen tunggal.

Di bawah ini, Anda memproses larik reptiles dan mengembalikan elemen li untuk setiap item di larik. Anda dapat menggunakan metode ini bila ingin menampilkan elemen tunggal untuk setiap item di larik:

function ReptileListItems() {
  const reptiles = ["alligator", "snake", "lizard"];

  return reptiles.map((reptile) => <li>{reptile}</li>);
}

Keluarannya akan terlihat seperti ini:

Output
- alligator
- snake
- lizard

Dalam contoh selanjutnya, Anda akan memeriksa alasan perlunya menambahkan key unik ke daftar elemen yang dirender oleh larik.

Merender Kumpulan Elemen di Dalam Komponen

Dalam contoh ini, Anda memproses larik dan membuat serangkaian komponen item daftar seperti contoh sebelumnya.

Untuk memulai, perbarui kode agar menggunakan komponen <ol> untuk menyimpan item <li>. Komponen <ol> akan membuat daftar item yang telah diurutkan:

function ReptileList() {
  const reptiles = ["alligator", "snake", "lizard"];

  return (
    <ol>
      {reptiles.map((reptile) => (
        <li>{reptile}</li>
      ))}
    </ol>
  );
}

Namun, jika mengamati konsol, Anda akan melihat peringatan bahwa setiap anak di suatu larik atau iterator harus memiliki kunci unik.

Peringatan tersebut muncul karena saat Anda mencoba merender suatu kumpulan di dalam komponen, Anda harus menambahkan sebuah key.

Dalam React, key unik digunakan untuk menentukan komponen dalam suatu kumpulan yang harus dirender kembali. Menambahkan key unik akan mencegah React dari keharusan merender kembali keseluruhan komponen setiap kali ada pembaruan.

Dalam langkah ini, Anda akan merender beberapa elemen sekaligus dalam komponen dan menambahkan key unik. Perbarui kode untuk menyertakan key di item daftar untuk menyelesaikan peringatan:

function ReptileList() {
  const reptiles = ['alligator', 'snake', 'lizard'];

  return (
    <ol>
      {reptiles.map(reptile => (
        <li key={reptile}>{reptile}</li>
      ))}
    </ol>
  );
}

Karena Anda telah menambahkan key, peringatan tersebut tidak akan ada lagi di konsol.

Dalam contoh selanjutnya, Anda akan melihat cara merender elemen yang berdekatan tanpa mengalami kesalahan sintaks umum.

Merender Elemen yang Berdekatan

Di JSX, untuk merender lebih dari satu elemen dalam suatu komponen, Anda harus menambahkan pembungkus di sekelilingnya.

Dalam contoh ini, Anda pertama-tama akan mengembalikan daftar item tanpa memproses suatu larik:

function ReptileListItems() {
  return (
    <li>alligator</li>
    <li>snake</li>
    <li>lizard</li>
  );
}

Ini akan memberi Anda pesan kesalahan keras di konsol:

Untuk memperbaiki kesalahan ini, Anda perlu membungkus blok elemen li dalam pembungkus. Untuk daftar yang dapat Anda gunakan membungkus elemen ol atau ul:

function ReptileListItems() {
  return (
  <ol>
    <li>alligator</li>
    <li>snake</li>
    <li>lizard</li>
  </ol>
  );
}

Elemen <li> yang berdekatan kini dibungkus dalam tag pengurung <ol>, dan Anda tidak akan lagi melihat kesalahan.

Di bagian selanjutnya, Anda akan merender daftar dalam pembungkus menggunakan komponen fragment.

Merender Elemen yang Berdekatan dengan React.fragment

Sebelum React v16.2, Anda dapat membungkus blok komponen dalam elemen <div>. Ini akan menghasilkan aplikasi yang penuh dengan divs, yang seringkali disebut “div soup”.

Untuk memperbaiki masalah ini, React merilis komponen baru yang dikenal sebagai komponen fragment:

Bila perlu merender daftar di dalam tag pengurung tetapi ingin menghindari keharusan menggunakan div, Anda dapat menggunakan React.Fragment sebagai gantinya:

function ReptileListItems() {
  return (
  <React.Fragment>
     <li>alligator</li>
     <li>snake</li>
     <li>lizard</li>
  </React.Fragment>
  );
}

Kode yang dirender hanya akan menyertakan elemen li dan komponen React.Fragment tidak akan muncul dalam kode.

Juga, perhatikan bahwa dengan React.fragment kita tidak perlu menambahkan kunci.

Anda mungkin merasa bahwa menulis React.fragment lebih membosankan daripada menambahkan <div>. Untungnya, tim React telah mengembangkan sintaks yang lebih pendek untuk mewakili komponen ini. Anda dapat menggunakan <> </> sebagai ganti <React.Fragment></React.Fragment>:

function ReptileListItems() {
  return (
 <>
    <li>alligator</li>
    <li>snake</li>
    <li>lizard</li>
 </>
  );
}

Kesimpulan

Dalam artikel ini, Anda telah mendalami berbagai contoh cara merender larik dalam aplikasi React.

Bila merender elemen di dalam komponen lain, Anda harus menggunakan key unik dan membungkus elemen di dalam elemen pembungkus.

Tergantung kasus penggunaan, Anda dapat membuat daftar sederhana yang dibungkus dalam komponen fragment yang tidak membutuhkan kunci.

Untuk mempelajari selengkapnya tentang praktik terbaik di React, ikuti seri lengkap Cara Menulis Kode di React.js di DigitalOcean.