Modificando o Formulário no Redux

Nesta aula, vamos finalizar o trabalho de exibir as informações do vendedor no formulário de adição de produto. Para isso, precisamos fazer apenas pequenas alterações na marcação do formulário.

Vamos abrir nosso aplicativo de produtos, e nele o arquivo NewProductForm.jsx. Vamos adicionar um trecho de código antes do comando return para a marcação da lista suspensa, na qual selecionaremos o vendedor. Vamos implementá-la usando o método padrão com map:

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

E agora vamos fazer as alterações na própria marcação. Para isso, no formulário, entre o primeiro e o segundo parágrafo (entre os blocos de marcação para o nome e a descrição do produto), vamos inserir um parágrafo com a seguinte marcação:

products/NewProductForm.jsx<p>
  <label htmlFor="prodSeller">Vendedor:</label>
  <select id="prodSeller" value={sellerId} onChange={onSellerChanged}>
    <option value=""></option>
    {sellersList}
  </select>
</p>

Agora podemos iniciar nosso aplicativo. No formulário de adição, apareceu uma lista suspensa com os vendedores. Vamos tentar preencher o formulário com dados, selecionar um deles e clicar no botão de salvar. Agora, se olharmos no Redux DevTools, nós veremos as alterações - no novo produto adicionado, apareceu uma propriedade seller com o id do vendedor selecionado como valor. Também na aba State agora são exibidos dois slices products e sellers.