# Внесение изменений в форму в Redux

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

Откроем наше приложение с продуктами, а в нем файл `NewProductForm.jsx`. Давайте перед командой `return` добавим кусочек кода для верстки выпадающего списка, в котором мы будем выбирать продавца. Реализуем его через стандартный способ с `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`, в котором будут ФИО преподавателей, как показано в уроке.

Внесите изменения в верстку, добавив еще один блок для вывода выпадающего списка с преподавателями.

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

← →
↑