Izmene u formi u Redux-u

Na ovom času ćemo završiti rad na prikazivanju informacija o prodavcu u formi za dodavanje proizvoda. Za ovo nam preostaje da malo izmenimo izgled forme.

Otvorimo našu aplikaciju sa proizvodima, a u njoj fajl NewProductForm.jsx. Hajde pre naredbe return dodajmo deo koda za izgled padajuće liste, u kojoj ćemo birati prodavca. Implementiraćemo je preko standardnog načina sa map:

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

I sada unesimo izmene u sam izgled. Za ovo u formi između prvog i drugog pasuša (između blokova za naziv i opis proizvoda) ubacimo pasuš sa sledećim izgledom:

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

Sada možemo pokrenuti našu aplikaciju. U formi za dodavanje pojaviće nam se lista sa prodavcima. Pokušajmo da popunimo formu podacima, izaberemo jednog od njih i kliknemo na dugme za čuvanje. Sada, ako pogledamo u Redux DevTools, mi ćemo videti izmene - u novododatom proizvodu pojaviće nam se svojstvo seller sa id izabranog prodavca kao vrednošću. Takođe, u kartici State sada se prikazuju dva slajsa products i sellers.

Otvorite vašu aplikaciju sa studentima. U fajlu NewStudentForm.jsx napravite padajuću listu teachersList sa pomoću map, u kojoj će biti puno ime nastavnika, kao što je pokazano u času.

Unesite izmene u izgled, dodajući još jedan blok za prikaz padajuće liste sa nastavnicima.

Pokrenite vašu aplikaciju. U formi za dodavanje studenta treba da vam se pojavi padajuća lista sa nastavnicima, koju ste pravili u prethodnim zadacima.