Унясенне зменаў у форму ў Redux

На гэтым заняцці мы скончым работу па вываду інфармацыі пра прадаўца ў форме для дадання прадукту. Для гэтага нам засталося крыху змяніць вёрстку формы.

Адкрыем наша прыкладанне з прадуктамі, а ў ім файл NewProductForm.jsx. Давайце перад камандай return дадамо кавалачак кода для вёрсткi выпадаючага спісу, у якім мы будзем выбіраць прадаўца. Рэалізуем яго праз стандартны спосаб з map:

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

І цяпер унясем змены ў самую вёрстку. Для гэтага ў форме паміж першым і другім абзацамі (паміж блокамі вёрсткі для назвы і апісання прадукту) уставім абзац са следуючай вёрсткай:

<p>
	<label htmlFor="prodSeller">Seller:</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, у якім будуць ПІБ выкладчыкаў, як паказана ў уроку.

Унясіце змены ў вёрстку, дадаўшы яшчэ адзін блок для вываду выпадаючага спісу з выкладчыкамі.

Запусціце ваша прыкладанне. У форме для дадання студэнта ў вас павінен з'явіцца выпадаючы спіс з выкладчыкамі, які вы рабілі ў папярэдніх задачах.