Pengolahan Data Pada Stateless Component Untuk Pemula

Stateless component bukan berarti tak punya kemampuan untuk mengolah ataupun menampung data. Justru enaknya pakai stateless component, bisa pasang-copot plugin komponen sesuai kehendak.

“Ha? gimana gimana fal? Pasang-copot plugin?”

Jadi stateless component itu bisa di-enhance menggunakan recompose. Agar lebih mudah memahaminya, recompose ini adalah library yang menyediakan banyak plugin berupa HOC (High Order Component) yang bisa dipasang pada stateless / functional component.

acdlite/recompose

Sudah tau kan apa itu stateless atau functional component? kalau belum, coba baca artikel di bawah ini terlebih dahulu.

React Functional Component Untuk Pemula

State Pada Komponen

Setiap komponen mempunyai kemampuan untuk menyimpan data seperti warna, ukuran, apapun data itu. Data ini yang akan mengatur behaviour maupun tampilan dari komponen.

Jadi kalau di React itu, data yang mengatur tampilan. Kalau ingin tampilan dari suatu elemen ataupun komponen itu berubah, maka wajib mengubah datanya terlebih dahulu.

Data yang disimpan ini juga bisa disampaikan ke child component — tapi tidak akan dibahas secara mendalam pada artikel kali ini. Nah, data yang sedang dibicarakan ini biasa disebut dengan state.

Contoh sederhana, mari membuat sebuah komponen yang bisa berganti warna saat tombol ditekan sesuai dengan warna yang ada pada tombol tersebut. Berikut tampilannya.

Tampilan Component yang akan buat

Setiap komponen memiliki kemampuan untuk menyimpan datanya tanpa mempengaruhi komponen lain. Jadi, state ini lingkupnya hanya berlaku pada internal komponen saja. Mari kita buktikan

Isolated State

State antara komponen satu dengan komponen lainnya tidak saling bercampur. Jadi, jika komponen satu berubah, yang lain tak ikut berubah. ini dikarenakan sifat state yang terisolasi dan tidak bisa diubah dari luar.

List Rendering

Untuk langkah pertama, mari membuat kerangka komponen terlebih dahulu sebelum benar-benar menerapkan logic pada komponen tersebut.

React mampu melakukan list rendering yaitu iterasi untuk merender sebuah elemen ataupun component. Mari perhatikan syntax colorList.map() yang melakukan iterasi untuk me-render element <button/> secara berulang sesuai dengan variabel colorList yang ada di atas.

Iterasi hanya berlaku pada Array, dan akan mengiterasi atau melakukan perulangan sesuai dengan urutan. Maka, tombol yang akan tampil adalah tombol “red”, “green”, lalu “blue”.

Jangan lupa untuk membuat file CSS nya, agar box pada komponen bisa terlihat sesuai dengan gambar. Sudah tahu kan cara load CSS pada laman web? Yaps, dengan menggunakan element <link> — tidak akan dibahas pada artikel ini.

File CSS untuk mempertegas tampilan komponen

State Via Recompose

Recompose mempunya HOC bernama withState yang berfungsi untuk mengadakan state pada stateless component.

Memasang HOC withState pada component

withState adalah HOC yang menerima 3 argumen, yaitu: nama state, nama method, dan initial state. Berdasarkan kodingan di atas, maka statenya bernama color dengan initial value “blue” — Jadi default warnannya adalah biru. Sedangkan setColor adalah method yang digunakan untuk mengubah state color. Semisal ingin mengubah menjadi warna merah. maka cukup menjalankan

setColor("red") // Mengubah menjadi merah
setColor("blue") // Mengubah menjadi biru
setColor("green") // Mengubah menjadi hijau

Sedangkan variable enhance merupakan HOC hasil dari semua kombinasi plugin-plugin atau HOC-HOC recompose yang digunakan — kebetulan kita masih menggunakan satu saja.

Variable enhance ini digunakan untuk membungkus component yang hendak di-export. perhatikan bagian ini

export default enhance(ToggleColor)

Itu artinya komponen yang di-export adalah komponen<ToggleColor /> versi yang telah diberi plugin HOC dari recompose

Event Listener

setColor ini bisa diletakkan pada event listener pada React Element. Perhatikan baris kode di bawah ini

<button onClick={() => setColor(color)}>{color}</button>

Itu artinya ketika tombol diklik maka akan merubah state color sesuai dengan variable color hasil dari iterasi

Templating Sesuai Data

Tapi kali ini tidak akan ada elemen yang berwarna ataupun berubah, karena baru bisa merubah datanya saja, belum merubah tampilannya. Untuk merubah tampilannya agar sesuai data. Maka harus meletakan variable atau props yang ada pada template JSX.

Ubah template seperti dibawah ini:

Menampilkan data pada view / template JSX

Dengan mengedit template JSX sesuai kode di atas, maka style color dari elemen h1 akan berubah sesuai dengan props color — yang berasal dari recompose — dan tulisan elemen b akan berubah sesuai dengan value dari props color pula. Ini lah yang membuat tampilan dari komponen berubah sesuai dengan data.

Untuk teman-teman yang butuh full code nya, bisa lihat disini

Full Code Enhanced Toggle Component

Sedangkan teman-teman yang ingin live demo dari komponen ini, bisa cek pen saya di codepen.

Kesimpulan

Stateless bukan berarti tidak mampu untuk mengolah datanya sendiri. Justru dengan menggunakan stateless component + recompose, component akan memiliki pembeda antar logic dan view lebih jelas dan mudah untuk dipasang maupun dicopot. Penulisan component-nya pun lebih sederhana.

Dan… “Sepertinya” cocok untuk pemula…

Hari ini kita telah belajar bersama tentang list rendering di React, penggunaan HOC pada React Component, dan juga belajar cara merubah view berdasarkan data.

Untuk sementara, teman-teman bisa explore sendiri lebih lanjut tentang React. Kalau ada request suatu pembahasan tentang frontend things bisa kontak saya.

Penutup

Setiap detil isi konten dalam artikel ini tidak bermaksud untuk show off, menyinggung, menyindir, ataupun sejenisnya. Melainkan hanya menuliskan tutorial sederhana untuk para pemula.

Sangat terbuka untuk kritik dan saran. Kalau saya salah, mohon dengan sangat untuk diingatkan. Semoga bermanfaat dan jangan lupa Clap and Share~

Let’s talk about some projects with me

Just Contact Me At:

• Email: bosnaufalemail@gmail.com
• Skype Id: bosnaufal254
• twitter: @BosNaufal
• telegram: @BosNaufal