Passing State React dengan Programmatic React Router
Photo by Ferenc Almasi on Unsplash
Saat user melakukan input data melalui form aplikasi React js, event yang menangani submit data melakukan request menuju server melalui API atau backend. Umumnya request method yang menangani oleh pengiriman data ke server ialah method post.
Misalnya, ambil contoh ketika membangun fitur transaksi pembayaran. Pertama, user melakukan input data metode pembayaran, nomor telepon, dan jumlah transaksi (atau secara otomatis terkalkulasi state). Setelah melakukan input, user diarahkan ke halaman konfirmasi pembayaran yang berisi output kode referal/transaksi (di-generate otomatis), metode pembayaran, nama, alamat, nomor telepon, dan jumlah transaksi.
Biasanya, pada halaman input, developer membuat komponen input yang dibungkus oleh komponen form yang memiliki atribut event handler saat melakukan submit data dan method post-nya. Kemudian pada halaman konfirmasi pembayaran, output berupa tabel ditampilkan.
Untuk lebih jelasnya coba lihat tampilan mock-up berikut.
Saat user melakukan input data, state menyimpan data interaktif user untuk diproses lanjut melalui request. Untuk memastikan data yang dikirimkan form ke halaman konfirmasi sama, developer harus memastikan state yang berisi data input user dapat ditampilkan pada halaman konfirmasi pembayaran.
Karena transisi dari halaman input menuju halaman konfirmasi berupa navigasi, maka library react-router berperan dalam melakukan fungsi navigasi. Selain fungsi navigasi, pengiriman state juga perlu dilakukan untuk menampilkan data di halaman konfirmasi pembayaran.
react-router secara umum melakukan fungsi navigasi secara deklaratif. Kenapa deklaratif? Sebab developer dapat melakukan navigasi dengan memanfaatkan komponen seperti <Link> atau <Redirect> di JSX. Selain deklaratif, react-router dapat digunakan secara programmatic dengan memanfaatkan API history.
axios.post(url, data, config)
.then(res => {
this.props.history.push({
pathname: '/confirmation',
state: { confirmData: res.data }
})
})
Kode di atas, melakukan fetching data dengan library axios dengan method post. this.props.history.push melakukan navigasi dengan path tertentu dan dengan state hasil response input pengguna. Sehingga pada halaman yang dituju, komponen dapat me-render response yang dilakukan halaman sebelumnya.