Внесување на промени во форма во 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, во која ќе има име и презиме на предавачите, како што е прикажано во лекцијата.

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

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