Уношење измена у форму у Redux-у

На овом часу ћемо завршити посао по испису информација о продавцу у форми за додавање производа. За то нам је остало мало да изменимо верстак форме.

Отворимо нашу апликацију са производима, а у њој фајл NewProductForm.jsx. Хајде пред команду return да додамо комадић кода за верстак падајуће листе, у којој ћемо бирати продавца. Имплементирајмо га преко стандардног начина са map:

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

И сада унесемо измене у сам верстак. За то у форми између првог и другог пасуса (између блокова верстака за назив и опис производа) убацимо пасус са следећим верстаком:

<p>
	<label htmlFor="prodSeller">Продавац:</label>
	<select id="prodSeller" value={sellerId} onChange={onSellerChanged}>
		<option value=""></option>
		{sellersList}
	</select>
</p>

Сада можемо покренути нашу апликацију. У форми за додавање нам се појавила листа са продавцима. Покушајмо да попунимо форму подацима, изаберемо једног од њих и кликнемо на дугме за чување. Сада, ако погледамо у Redux DevTools, ми ћемо видети измене - у новом додатом производу нам се појавило својство seller са id изабраног продавца у качеству вредности. Такође у картици State сада се приказују два слајса products и sellers.

Отворите вашу апликацију са студентима. У фајлу NewStudentForm.jsx направите падајућу листу teachersList са помоћу map, у којој ће бити пуно име предавача, као што је приказано у лекцији.

Унесите измене у верстак, додавши још један блок за испис падајуће листе са предавачима.

Покрените вашу апликацију. У форми за додавање студента вам се мора појавити падајућа листа са предавачима, коју сте радили у претходним задацима.