Kryerja e Ndryshimeve në Formular në Redux

Në këtë sesion, ne do të përfundojmë punën për shfaqjen e informacionit mbi shitësin në formularin për shtimin e produktit. Për këtë, na mbetet të ndryshojmë pak strukturën e formularit.

Le të hapim aplikacionin tonë të produkteve, dhe në të skedarin NewProductForm.jsx. Le të shtojmë përpara komandës return një fragment kod për strukturën e listës rënëse, në të cilën do të zgjedhim shitësin. Le ta implementojmë atë përmes mënyrës standarde me map:

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

Dhe tani le të bëjmë ndryshime në vetë strukturën. Për këtë, në formular midis paragrafit të parë dhe të dytë (midis blloqeve të strukturës për emrin dhe përshkrimin e produktit) le të fusim një paragraf me strukturën e mëposhtme:

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

Tani mund të nisim aplikacionin tonë. Në formularin për shtim u shfaq një listë me shitës. Le të përpiqemi të plotësojmë formularin me të dhëna, të zgjedhim një prej tyre dhe të klikojmë në butonin e ruajtjes. Tani, nëse shikojmë në Redux DevTools, ne do të shohim ndryshimet - në produktin e ri të shtuar u shfaq një pronë seller me id-në e shitësit të zgjedhur si vlerë. Gjithashtu, në skedën State tani shfahen dy slice products dhe sellers.

Hapni aplikacionin tuaj me studentët. Në skedarin NewStudentForm.jsx krijoni listën rënëse teachersList me ndihmën e map, në të cilën do të jenë emrat e plotë të mësuesve, siç tregohet në mësim.

Bëni ndryshime në strukturë, duke shtuar edhe një bllok për shfaqjen e listës rënëse me mësuesit.

Nisni aplikacionin tuaj. Në formular për shtimin e studentit duhet të shfaqet lista rënëse me mësuesit, që keni bërë në detyrat e mëparshme.