Внасяне на промени във форма в 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, в който ще има имената на преподавателите, както е показано в урока.

Внесете промени във верстката, като добавите още един блок за извеждане на падащ списък с преподаватели.

Стартирайте вашето приложение. Във формата за добавяне на студент трябва да се появи падащ списък с преподаватели, който направихте в предишните задачи.