Membuat Perubahan pada Form di Redux

Pada sesi ini, kita akan menyelesaikan pekerjaan untuk menampilkan informasi tentang penjual dalam form untuk menambahkan produk. Untuk itu, kita tinggal sedikit mengubah tampilan formnya.

Mari buka aplikasi produk kita, dan di dalamnya file NewProductForm.jsx. Mari sebelum perintah return kita tambahkan sepotong kode untuk tampilan dropdown list, di mana kita akan memilih penjual. Kita akan mengimplementasikannya melalui cara standar dengan map:

const sellersList = sellers.map((seller) => (
	<option key={seller.id} value={seller.id}>
		{seller.name}
	</option>
))

Dan sekarang mari kita ubah tampilannya sendiri. Untuk itu, di dalam form antara paragraf pertama dan kedua (antara blok tampilan untuk nama dan deskripsi produk) kita akan sisipkan paragraf dengan tampilan berikut:

<p>
	<label htmlFor="prodSeller">Seller:</label>
	<select id="prodSeller" value={sellerId} onChange={onSellerChanged}>
		<option value=""></option>
		{sellersList}
	</select>
</p>

Sekarang kita bisa menjalankan aplikasi kita. Di form untuk menambahkan, sekarang muncul daftar dengan penjual. Mari kita coba isi form dengan data, pilih salah satu penjual dan klik tombol simpan. Sekarang, jika kita lihat Redux DevTools, kita akan melihat perubahan - di produk yang baru ditambahkan tadi, kita memiliki properti seller dengan id penjual yang dipilih sebagai nilainya. Juga di tab State sekarang ditampilkan dua slice products dan sellers.

Buka aplikasi Anda dengan siswa. Di file NewStudentForm.jsx buatlah dropdown list teachersList dengan menggunakan map, yang akan berisi Nama guru, seperti yang ditunjukkan dalam pelajaran.

Lakukan perubahan pada tampilan, tambahkan satu blok lagi untuk menampilkan dropdown list dengan guru.

Jalankan aplikasi Anda. Di dalam form untuk menambahkan siswa, Anda seharusnya melihat dropdown list dengan guru, yang Anda buat di tugas-tugas sebelumnya.