lifelong learner — urip iku urup, currently working on accenture.

React – List and keys

0
Degananda.com -

List adalah cara menampilkan data yang dijejer secara vertikal kebawah. React memiliki cara tersendiri untuk menampilkan suatu list. List biasannya identik dengan syntax <li>. Lalu bagaimana dengan keys? apakah keys? mengapa list dan keys memiliki suatu hubungan pada react? silahkan simak pada ulasan ini untuk mengetahui pertanyaan-pertanyaan diatas.

Menampilkan komponen atau elemen dalam sebuah list tentunya sangat diperlukan terutama jika data tersebut banyak dan sering kali kita membaginnya berdasarkan halaman (pagging). Key adalah attribute yang diperlukan oleh react saat melakukan rendering suatu list. Mengapa ? karena key digunakan untuk mengetahui elemen mana yang berubah. Lagi-lagi ini persoalan performa. Sehingga ketika data dalam list tersebut berubah yang berubah hanyalah data-data tertentu yang mengalami perubahan.

Sebelum kita membahas keys dalam list terlebih dahulu harus mengerti mengenai mekanisme penggunaan fungsi map() pada javascript. Dikarenakan untuk membuat list dalam react menggunakna fungsi map() pada suatu array / object. Sebenarnya map tidak hanya dapat digunakan dalam array melainkan juga dapat digunakan di suatu observable (jika kita menggunakan reactive programming atau RXJS). Namun rxjs tidak akan dibahas pada ulasan ini. Sehingga data yang kita gunakan untuk menampilkan list adalah berupa array standar.

Fungsi map pada javascript

Map adalah suatu operator yang melakukan mapping terhadap masing-masing anggota didalam suatu array dan kemudian melakukan transformasi kepada mereka (anggota). Contohnya kita memiliki array [1,2,3,4,5,6,7,8]. Dengan menggunakan fungsi map() kita dapat mengubah seluruh anggota tersebut nilainya menjadi dua kali lipatnya. Singkatnya map adalah fungsi untuk mentransformasi nilai dalam suatu array / object.

Berikut ini adalah contoh implementasi map pada kode

const nomorTogel = [2,3,5,6,7,8,9,10];
const nomorTogelTembus = nomorTogel.map(
    (nomor) => (nomor*2)
)

console.log(nomorTogel);
console.log(nomorTogelTembus);

Map diperkenalkan pada Ecmascript2015 atau ES6 sehingga kita dapat mengkombinasikannya dengan menggunakan arrow. bagi anda yang tidak terbiasa dengan cara penulisan ES6 ini mulailah untuk membiasakan karena saat ini react menggunakan ES6. Array yang ditransformasikan dapat ditampung dalam suatu variabel atau dapat kita secara langsung mereturnnya sesuai dengan contoh kode dibawah ini

const nomorTogel = [2,3,5,6,7,8,9,10];

function transformNomor(nomorTogel){
    return nomorTogel.map(
    (nomor) => (nomor*2)
    )
}

kedua kode diatas akan sama-sama memberikan tampilan seperti dibawah ini saat dijalankan

List pada react

Render element

Untuk dapat membuat list kita memanfaatkan metode map() pada javascript. Sedangkan untuk melakukan render kita dapat mengembednya / menaruhnya pada JSX, melakukan render komponen tersebut ataupun sekedar merender elemen listnya. Kita akan memulai dengan melakukan membuat list dan melakukan render pada elemen (<li>). Contohnya kita memiliki array seperti dibawah ini

const nomorTogel = [2,3,5,6,7,8,9,10];

setelah itu kita akan merender array diatas menjadi list (<li>) maka kode yang digunakan adalah

const nomorTogel = [2,3,5,6,7,8,9,10];

function transformNomor(nomorTogel){
    return nomorTogel.map(
    (nomor) => <li>{(nomor*2)}</li>
    )
}

ReactDOM.render(
    <ul>{transformNomor(nomorTogel)}</ul>
, document.getElementById('root'));
registerServiceWorker();

kode diatas jika dijalankan akan menghasilkan tampilan seperti berikut ini

Render komponen

Jika sebelumnya list langsung dirender sebagai suatu elemen maka kita juga dapat menempatkan list tersebut dalam suatu komponen kemudian baru kita render (komponen tersebut). Contohnya kita memiliki komponen yang menampilkan list seperti berikut ini

constructor(props){
  super(props);
  this.state = {
    buah : ['mangga', 'pisang', 'apel']
  }
}

List diatas dapat langsung kita letakan di JSX lalu kemudian baru dirender (komponennya).

render() {
  return (
    <ul>
    {
      this.state.buah.map(
        (buahItem) => <li>{buahItem}</li>
      )
    }
    </ul>
  );
}

kode diatas jika dieksekusi akan menghasilkan tampilan

Keys

fungsi utama dari keys adalah untuk mengidentifikasi elemen dari list mana yang berubah. Keys ditulis sebagai attribute dari <li> (contoh). Dalam best practice yang disarankan oleh react nilai dari keys sebaiknya adalah id dari list tersebut. Sehingga pastikan list memiliki id. Yang paling penting keys haruslah UNIK. Karena kembali ke fungsi dasarnya adalah untuk membedakan elemen apda list. Sehingga perubahan pada DOM hanya pada elemen yang berubah. Contohnya adalah kita memiliki komponen dibawah ini

constructor(props){
  super(props);
  this.state = {
    buah : [{
      id : 1,
      text : "mangga"
    }, {
      id : 2,
      text : "apel"
    }, {
      id : 3,
      text : "pisang"
    }, {
      id : 4,
      text : "anggur"
    }]
  }
}

maka jika ingin menampilkan list diatas dengan keys berupa id dari anggota list diatas adalah

render() {
  return (
    <ul>
    {
      this.state.buah.map(
        (buahItem) => <li key={buahItem.id}>{buahItem.text}</li>
      )
    }
    </ul>
  );
}

kode diatas akan menghasilkan