Pencatatan dan Pengeditan Data berdasarkan Parameter URL di React Router

Aplikasi kita sekarang dapat memuat data untuk setiap produk individual dari penyimpanan. Pada pelajaran ini, kita akan mulai menerapkan penambahan informasi produk dan pengeditannya berdasarkan parameter URL.

Untuk memasukkan atau mengubah data kita akan kembali menggunakan komponen Form. Untuk memulainya, mari buka product.jsx dan tambahkan di akhir markup tombol untuk mengedit data produk - setelah paragraf terakhir (jangan lupa untuk mengimpor Form ke dalam file):

<Form action="edit">
	<button type="submit">edit</button>
</Form>

Sekarang kita memiliki tombol edit pada halaman produk. Selanjutnya, kita akan membuat agar saat tombol ini ditekan, kita diarahkan ke halaman dengan formulir, di mana kita dapat memasukkan data. Untuk ini, kita akan membuat rute lain dengan products/:productId/edit. Mari buat layout untuk ini.

Jadi, di folder routes kita akan membuat file baru edit.jsx. Di sini kita akan memiliki formulir dengan field name, cost dan amount untuk diisi, serta tombol simpan. Semua ini akan berada dalam komponen EditProduct. Pastikan untuk menulis atribut name, mereka akan dibutuhkan dalam pelajaran berikutnya:

import { Form } from 'react-router-dom';

function EditProduct() {
	return (
		<Form method="post" id="product-form">
			<div>
				<span>Name:</span>
				<input placeholder="name" type="text" name="name" />
			</div>
			<div>
				<span>Cost:</span>
				<input placeholder="cost" type="text" name="cost" />
			</div>
			<div>
				<span>Amount:</span>
				<input placeholder="amount" type="text" name="amount" />
			</div>
			<p>
				<button type="submit">save</button>
			</p>
		</Form>
	);
}

export default EditProduct;

Ambil aplikasi yang Anda buat di tugas pelajaran sebelumnya. Gunakan materi pelajaran, tambahkan tombol untuk mengedit data siswa. Buat file edit.jsx untuk mengedit dengan fungsi EditStudent, yang akan berisi formulir untuk mengisi data tentang siswa.