Modificación de formularios en Redux

En esta sesión terminaremos el trabajo de mostrar la información del vendedor en el formulario para agregar un producto. Para ello, nos queda modificar un poco el maquetado del formulario.

Abrimos nuestra aplicación de productos, y en ella el archivo NewProductForm.jsx. Vamos a agregar un fragmento de código antes del comando return para el maquetado del menú desplegable, en el cual seleccionaremos al vendedor. Lo implementaremos mediante el método estándar con map:

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

Y ahora realizaremos cambios en el maquetado mismo. Para ello, en el formulario entre el primer y el segundo párrafo (entre los bloques de maquetación para el nombre y la descripción del producto) insertaremos un párrafo con el siguiente maquetado:

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

Ahora podemos ejecutar nuestra aplicación. En el formulario para agregar, nos apareció un listado con los vendedores. Probemos llenar el formulario con datos, seleccionar a uno de ellos y hacer clic en el botón de guardar. Ahora, si miramos en Redux DevTools, veremos cambios - en el nuevo producto agregado nos apareció la propiedad seller con el id del vendedor seleccionado como valor. También en la pestaña State ahora se muestran dos segmentos (slices) products y sellers.

Abra su aplicación de estudiantes. En el archivo NewStudentForm.jsx cree un menú desplegable teachersList con ayuda de map, en el cual estarán los nombres completos de los profesores, como se muestra en la lección.

Realice cambios en el maquetado, agregando un bloque más para mostrar el menú desplegable con los profesores.

Ejecute su aplicación. En el formulario para agregar un estudiante, debe aparecerle un menú desplegable con los profesores, que hicieron en las tareas anteriores.