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

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

Откроем наше приложение с продуктами, а в нем файл NewProductForm.jsx. Давайте перед командой return добавим кусочек кода для верстки выпадающего списка, в котором мы будем выбирать продавца. Реализуем его через стандартный способ с map:

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

И теперь внесем изменения в саму верстку. Для этого в форме между первым и вторым абзацами (между блоками верстки для названия и описания продукта) вставим абзац со следующей версткой:

products/NewProductForm.jsx<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.