Making Changes to a Form in Redux

In this lesson we will finish the work on displaying information about the seller in the form for adding a product. To do this, we only need to change the form layout a little.

Let's open our product app, and in it the file NewProductForm.jsx. Let's add a piece of code before the return command to layout the drop-down list in which we will select the seller. Let's implement it using the standard method with map:

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

And now let's make changes to the layout itself. To do this, in the form between the first and second paragraphs (between the layout blocks for the name and description of the product), insert a paragraph with the following layout:

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

Now we can run our application. In the form for adding, we have a list of sellers. Let's try to fill in the form with data, select one of them and click the save button. Now, if we look at Redux DevTools, we will see the changes - in the newly added product, we have a property seller with the id of the selected seller as a value. Also, in the State tab, two slices are now displayed products and sellers.

Open your app with students. In the NewStudentForm.jsx file, create a dropdown list teachersList using map that contains the names of the teachers, as shown in the lesson.

Make changes to the layout by adding another block to display a drop-down list with teachers.

Run your application. In the form for adding a student, you should see a drop-down list with teachers, which you made in the previous tasks.