Adding a Form to Redux

In the last lesson, we learned that form input fields can use states that will only work within one component, and we created an empty form.

Let's place the layout for each field where the information will be entered inside the form tags. Our first input will be responsible for the product name and its layout will be as follows:

<form>
	<p>
		<label htmlFor="productName">Name:</label>
		<input
			id="productName"
			name="productName"
			value={name}
			onChange={onNameChanged}
		/>
	</p>
</form>

Secondly, we will have textarea for the product description:

<p>
	<label htmlFor="productDesc">Description:</label>
	<textarea
		id="productDesc"
		name="productDesc"
		value={desc}
		onChange={onDescChanged}
	/>
</p>

Write the code yourself for the two remaining inputs for price and quantity with IDs productPrice and productAmount respectively.

After all four input fields, before the closing form tag, add a save button:

<button type="button">save</button>

Our component with the form is ready. Let's display it on the main page. To do this, open the file root.jsx, import the component into it:

import { NewProductForm } from '../parts/products/NewProductForm'

And we'll insert it between the hr tag and the ProductsList component like this:

<hr></hr>
<NewProductForm />
<ProductsList />

Let's run our application and admire the form and the list of products. Let's add some more styles to index.css:

#main-page {
	max-width: 600px;
}

select,
textarea,
input,
button {
	font-size: 18px;
}

form {
	margin-bottom: 20px;
	border-bottom: 2px solid lightgray;
	padding-bottom: 10px;
}

form p {
	margin: 5px;
}

Open your application with students. Make a layout for your form as shown in the lesson.

Add the completed NewStudentForm component to the home page before StudentsList