Membuat Generic DropDown dengan ReactJS

Salah satu kelebihan reactjs, adalah bisa membuat komponen sekecil mungkin, dan komponen-komponen ini bisa di re-use atau digunakan kembali.

Selain bisa di re-use, memecah komponen menjadi bagian-bagian kecil juga memudahkan untuk maintenance.

Ketika terjadi error, cukup membenahi di komponen tersebut. Dalam membuat komponen generik, sebaiknya meminimalisir operasi-operasi kalkulasi yang spesifik, karena generik jadi harus bisa dipakai dengan masukan yang umum.

Salah satu komponen penting dalam form selain input text dan text area adalah dropdown. Dengan reactjs, memungkinkan untuk membuat komponen dropdown yang generik.

Komponen dropdown yang harus ada:

1. select 
2. options
3. List/map
4. Default value
5. Selected value
6. onChange event

Komponen Option

Ide nya adalah, komponen option ini hanya menerima masukan dan menampilkan value dan label.

Komponen Select

Test

1. Clone from here
2. npm install
3. npm start

Result

Jika memilih drop down yang kedua, maka nilai yang dipilih akan ditampilkan di bawahnya.