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:

const 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:

<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.

Abra seu aplicativo de estudantes. No arquivo NewStudentForm.jsx, crie uma lista suspensa teachersList usando map, que conterá os nomes dos professores, conforme mostrado na lição.

Faça alterações na marcação, adicionando mais um bloco para exibir a lista suspensa com os professores.

Inicie seu aplicativo. No formulário de adição de estudante, deve aparecer uma lista suspensa com os professores, que você criou nas tarefas anteriores.