Topik ini salah satu yang sedang ramai di bahasa group facebook React JS Indonesia. Menurut pengalaman pribadi saya, memang fitur ini penting jika gak mau dikatakan wajib, tetapi banyak dilewatkan programmer khususnya programmer yang developer aplikasi web, kalo dari sisi programmer pasti banyak yang membantah dengan alasan "Tergantung projeknya juga, bla bla bla" dan lainnya, tapi coba deh kalian tanyakan ke client kalian pasti kebanyakan mereka memerlukan fitur ini.

Sedikit Cerita Pengalaman Mengenai Case Ini

Tim saya pernah develop sistem informasi relawan dari salah satu bacaleg, aplikasi udah selesai dan kami pikir semua sudah ok. Tetapi belakangan hari klien komplain dia kesulitan harus selalu melakukan filter data secara berulang ketika dia meninggalkan halaman listing pendukung ataupun tidak sengaja refresh halaman pendukung, masih disebabkan hal yang sama dia juga jadi sulit membagikan data yang dia telah filter ke orang lain.

Ternyata penyebabnya salah satu tim saya lupa menambahkan query params setiap user apply criteria filter baru, misal halaman relawan tadi memiliki path /relawan ketika user melalukan filter untuk mencari nama agus harusnya url halaman berubah menjadi /relawan?name=agus.

Nah di tulisan kali ini saya akan membagikan cara mudah menambahkan query params ketika user apply criteria filter di react.js.

Menambahkan Filter Ke Query Params Menggunakan React.js

Disini kita akan menggunakan CRA, nantinya kalian bisa mengaplikasikan code ini baik di Remix, Next.js, dan Framework React.js lainnya. Untuk memudaahkan kita juga akan menggunakan React Router.

Setup Projek

npx create-react-app router-app-cra
cd router-app-cra
npm install react-router-dom

Silahkan buat file Homepage.js di src/pages.

import { useState, useEffect } from "react";

const Homepage = () => {
  const [posts, setPosts] = useState([]);  

  const fetchPost = () => {
    let url = "https://jsonplaceholder.typicode.com/posts";
    return fetch(url)
      .then((res) => res.json())
      .then((d) => setPosts(d))
  }

  const handleSubmit = (event) => {
    event.preventDefault();
    fetchPost()
  }

  useEffect(() => {
    fetchPost();
  }, []);

  return (
    <div>
      <table border="1" style={
        {margin: 'auto'}
      }>
        <thead>
          <tr>
            <th>Post Id</th>
            <th>User Id</th>
            <th>Title</th>
          </tr>
        </thead>
        <tbody>
          {posts && (
            posts.map((post) => (
              <tr key={post.id}>
                <td>{post.id}</td>
                <td>{post.userId}</td>
                <td>{post.title}</td>
              </tr>
            ))
          )}
        </tbody>
      </table>
    </div>
  );
}

export default Homepage;

Disini kita membuat komponen page yang akan memunculkan listing post dan menggunakan API Jsonplaceholder.com.

Lalu buka file src/App.js dan jangan lupa panggil komponen Outlet dari React Router.

import { Outlet } from "react-router-dom";

function App() {

  return (
    <div className="app">
      <header>
        <h3
          style={
            { textAlign: 'center' }
          }
        >
          Menambahkan Query Params Di React.js
        </h3>
      </header>
      <Outlet />
    </div>
  );
}

export default App;

Kita juga perlu mendefinisikan route homepage di index.js.

import React from 'react';
import ReactDOM from 'react-dom/client';
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import App from './App';
import Homepage from "./pages/Homepage";

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    children: [
      { index: true, element: <Homepage /> },
    ],
  }
]);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

Sekarang mari kita jalankan dengan perintah npm start. Dan hasilnya akan seperti ini.

Sekarang kita akan menambahkan form filter data di Homepage.js.

const Homepage = () => {
   const [keyword, setKeyword] = useState("");  
...

const handleSubmit = (event) => {
    event.preventDefault();
    fetchPost()
}

Tambahkan form di bagian template,

<div style={
        {margin: '10px auto'}
      } onSubmit={handleSubmit}>
        <form
          style={
            {textAlign: 'center'}
          }
        >
          <input
            placeholder="find by title"
            type="text"
            style={
              {minWidth: '400px'}
            }
            value={keyword}
            onChange={(e) => setKeyword(e.target.value)}
          />
          <button>Search</button>
        </form>

      </div>

Nah sekarang kita perlu menambahkan param title di bagian fetch API yang diambil dari isian form pencarian `title`.

const fetchPost = () => {
  let url = "https://jsonplaceholder.typicode.com/posts";
  if (keyword) {
    url += "?title=" + keyword
  }
  return fetch(url).then((res) => res.json()).then((d) => setPosts(d))
}

Sekarang mari kita coba isi kolom pencarian dengan value qui est esse dan klik tombol search, maka seperti terlihat di contoh dibawah table hanya akan memunculkan satu baris data saja.

Sekarang kita telah berhasil membuat filter, nah kita kembali ke masalah yang kita bahas di awal tadi. Ketika kita refresh halaman ini, maka segala filter akan ke-reset kembali seperti awal, maka itu kita butuh membuat initial state dari keyword berisi nilai dari query params.

Kita akan menggunakan hook useSearchParams dari React Router. Buka file Homepage.js

import { useSearchParams } from "react-router-dom";

Lalu ubah useState di bagian keyword agar initial state nya menggunakan nilai query params.

const [searchParams, setSearchParams] = useSearchParams();
const [keyword, setKeyword] = useState(searchParams.get("keyword") || '');

Kerja code diatas akan mengambil nilai object keyword dari state searchParams untuk diisi sebagai initial state keyword, namun jika kosong abaikan.

Satu langkah terakhir, kita perlu mengupdate state searchParams ketika user melakukan filter, kita perlu menyusaikan function handleSubmit,

const handleSubmit = (event) => {
   event.preventDefault();
   setSearchParams({
     'keyword': keyword
   });
   fetchPost()
 }

Mari kita coba,

Seperti yang terlihat di video diatas, query params secara automatis akan berubah sesuai isian dari kolom pencarian dan ini juga berpengaruh ke request yang dikirim ke API (lihat bagian console network).

Berikut full source code dari halaman Homepage.js.

import { useState, useEffect } from "react";
import { useSearchParams } from "react-router-dom";

const Homepage = () => {
  const [searchParams, setSearchParams] = useSearchParams();
  const [posts, setPosts] = useState([]);  
  const [keyword, setKeyword] = useState(searchParams.get("keyword") || '');

  const fetchPost = () => {
    let url = "https://jsonplaceholder.typicode.com/posts";
    if (keyword) {
      url += "?title=" + keyword
    }
    return fetch(url)
      .then((res) => res.json())
      .then((d) => setPosts(d))
  }

  const handleSubmit = (event) => {
    event.preventDefault();
    setSearchParams({
        'keyword': keyword
    });
    fetchPost()
  }

  useEffect(() => {
    fetchPost();
  }, []);

  return (
    <div>
      <div style={
        {margin: '10px auto'}
      } onSubmit={handleSubmit}>
        <form
          style={
            {textAlign: 'center'}
          }
        >
          <input
            placeholder="find by title"
            type="text"
            style={
              {minWidth: '400px'}
            }
            value={keyword}
            onChange={(e) => setKeyword(e.target.value)}
          />
          <button>Search</button>
        </form>

      </div>
      <table border="1" style={
        {margin: 'auto'}
      }>
        <thead>
          <tr>
            <th>Post Id</th>
            <th>User Id</th>
            <th>Title</th>
          </tr>
        </thead>
        <tbody>
          {posts && (
            posts.map((post) => (
              <tr key={post.id}>
                <td>{post.id}</td>
                <td>{post.userId}</td>
                <td>{post.title}</td>
              </tr>
            ))
          )}
        </tbody>
      </table>
    </div>
  );
}

export default Homepage;

Kesimpulan

Dengan fitur ini akan menambah nilai user friendly dari web atau aplikasi yang kalian buat. Menambahkan fitur ini juga sangat mudah dengan bantuan library React Router.

Terus Semangat untuk Belajar, Dan jangan ragu untuk bertanya jika memiliki pertanyaan lebih lanjut, jangan lupa untuk follow akun sosial media kami. Semoga teman-teman enjoy dengan tutorial yang diberikan, Semangat Koding :)

#InJavascriptWeTrust