DomaiNesia

Ticker

6/recent/ticker-posts

Implementasi SearchBar dengan penerapan useState untuk menangkap onClick event pada Remix App

Halo, kali ini saya sedang iseng develop app baru saya, kuliahku.id (meski baru iseng, domainnya sudah saya beli gaes..). App ini saya buat sebagai public repo ya, bisa dicek di sini. Rencananya saya buat itu untuk sharing materi-materi kuliah saya di kampus, coretan-coretan iseng tentang kuliah atau kalau pas saya mempelajari sesuatu hal baru, atau catatan ide-ide penelitian atau tulisan lain yang entah akan dipakai kapan...

Foto pada halaman index by: geralt and natsya_gepp (pixabay)

Nah, yang ingin saya share kali ini adalah cara saya menerapkan searchbar pada salah satu route di Remix App yang saya bangun (yang mungkin tidak ideal, jika nantinya ada programmer profesional membaca kode tsb).

Idenya sederhana, di route/halaman tersebut, pengunjung web saya dapat melihat seluruh materi kuliah yang sudah saya tambahkan ke database. Nah, Remix memanggil data yang diperlukan dari database dalam loader function. Kemudian data tersebut yang akan di map() di dalam tampilan html content nya dan akan dapat dilihat oleh pengunjung.

Nah, data awal yang di load/dihasilkan loader function dan dipassing ke fungsi utama dengan useLoaderData merupakan data array materi yang sudah ada di database. Kemudian di sisi UI saya membuat search bar dan search button. Pada awalnya hanya search button yang terlihat (search bar masih tidak terlihat), kemudian setelah onMouseOver pada button search maka searchbar/search input akan ditampilkan dengan bantuan ReactDOM.render(<div>konten yang akan ditampilkan</div>,document.getElementById("iddivtarget")).

 

Setelah pengunjung mengetikkan kata pencarian di input tersebut, maka setelah pengunjung mengklik tombol search maka event onClick akan mentrigger anonymous function:

 


 
Nah, di sini data post list items (array) akan dicocokkan dengan searchText, jika searchText ada di dalam judul materi atau di dalam body materi, maka item tersebut ditambakan ke dalam newData (atau data hasil filtering). Kemudian, terakhir, filteredData diupdate dengan useState menggunakan setFilteredData(newData).
 
Baru kemudian filteredData tersebut ditampilkan / di map() ke layar untuk dapat menampilkan data materi hanya yang sesuai dengan kata pencarian yang ada saja:

Ini hasilnya:




Semoga bermanfaat!



Post a Comment

0 Comments