It's time for the third assignment in this course.
In this module, we examined redux force.
We saw both controlled forms and uncontrolled forms.
Then you had a brief introduction to redux and then we looked at
react-redux forms as a way of creating forms in our React application.
In this assignment, we will explore forms in a little more detail.
There are three tasks in this assignment.
Let's look at the details next.
When you go to the application in the browser and then go to
that menu and then select any specific dish,
now within the dish,
right below the comments,
you will see this new button being added.
Now, this would be part of a new component called as
the comment form component that you will add to the dishdetailcomponent.js file.
This comment form component will be used in the render comments
function component that you have implemented in the dishdetailcomponent.js file,
and when included, will add this button into the field there.
Now, when this button is clicked,
this will pop up in model containing the form for our component.
So, creating this comment form component and
then adding it into our application is the first task in this assignment.
In the second task, as a said,
when you click on that Submit Comment button,
you would have the comment form pop up in the model as shown here.
Now, constructing this form would be the second task of your assignment.
So, in this form,
you will find three items there.
The first one is a rating field which we use the select to create the rating field here.
So, you will have the choice between one and five for giving the rating.
So, you will use that select for creating that.
The next one will be a text field where you type in the name here,
and then the third part would be a text area field with the label comment.
The text area field here itself contains six rows that allows
you to type in the comment about the dish here.
Then of course, a button called Submit which,
when clicked, will submit that comment.
So, you need to implement all of these,
support for this in your comment form component there.
This is the view of the comment form component.
So, you're making use of a button there which,
when clicked, will pop up this model,
and inside the model,
you're displaying the form as shown here.
Then the third task in your assignment would be to add form validation.
In this case, the only form validation that you need to add is to the author name here.
So, the author name as you'll see would contain at least,
so if you don't type anything in there in the author name,
and then you would immediately notice that an error message pops up saying,
"Must be greater than two characters."
So, as you type in,
the name disappears,
and as you see,
once you exceed 15 characters,
then the error message pops up that it must be 15 characters or less.
So, that's the form validation that you need to do for this author field in your form.
So, that will be the third task in your assignment.
Now, when you fill in that form,
so let's select a rating of three,
and then I'll type in
a more meaningful name there,
and then submit, then of course,
you have the handle submit function that is implemented in
the comment form component which will show this comment in an alert box as shown here,
and also will print this out into the console lock.
So, in the alert box,
you'll see the three fields being shown here: the author,
the rating, and the comment field been shown here.
When you click on the OK,
both the comment form and the alert box are both dismissed.
So, that complete the third task in this assignment.
So, three tasks to complete in this assignment as shown here.
After you complete the three tasks of your assignment,
do a Git commit with the message, assignment three solution.