Menambahkan Formulir ke Redux

Pada pelajaran sebelumnya kita belajar bahwa untuk field input formulir dapat menggunakan state yang akan bekerja hanya di dalam satu komponen, dan membuat formulir kosong.

Mari di dalam tag form tempatkan markup untuk setiap field, yang akan diisi dengan informasi. Input pertama kita akan bertanggung jawab untuk nama produk dan markupnya akan seperti ini:

<form>
	<p>
		<label htmlFor="productName">Nama:</label>
		<input
			id="productName"
			name="productName"
			value={name}
			onChange={onNameChanged}
		/>
	</p>
</form>

Yang kedua kita akan memiliki textarea untuk deskripsi produk:

<p>
	<label htmlFor="productDesc">Deskripsi:</label>
	<textarea
		id="productDesc"
		name="productDesc"
		value={desc}
		onChange={onDescChanged}
	/>
</p>

Tulis sendiri kode untuk dua input yang tersisa untuk harga dan jumlah dengan id productPrice dan productAmount secara berurutan.

Setelah keempat field input, sebelum tag penutup form tambahkan tombol untuk menyimpan:

<button type="button">simpan</button>

Komponen formulir kita sudah siap. Mari tampilkan di halaman utama. Untuk itu buka file root.jsx, impor komponen ke dalamnya:

import { NewProductForm } from '../parts/products/NewProductForm'

Dan sisipkan di antara tag hr dan komponen ProductsList seperti ini:

<hr></hr>
<NewProductForm />
<ProductsList />

Jalankan aplikasi kita dan lihatlah formulir dan daftar produk. Mari tambahkan beberapa gaya ke index.css:

#main-page {
	max-width: 600px;
}

select,
textarea,
input,
button {
	font-size: 18px;
}

form {
	margin-bottom: 20px;
	border-bottom: 2px solid lightgray;
	padding-bottom: 10px;
}

form p {
	margin: 5px;
}

Buka aplikasi Anda dengan data siswa. Buat markup untuk formulir Anda, seperti yang ditunjukkan dalam pelajaran.

Tambahkan komponen yang sudah selesai NewStudentForm ke halaman utama sebelum StudentsList