Good effort, and I would want to work on a set up for him and we're going to start that work in the
context where we'll add one more state value and the reason why we're adding this value.
If you take a look at the complete project, notice, I have a few inputs.
So one is going to be number and then there's going to be to select.
And of course, I would want them to be controlled the input.
So first, I just need to set up some values in the state and then, yes, there's handle change coming
up there, the cement and all that cool stuff.
But for the time being, just understand that we are setting up some default values for the input.
So that's why we'll will never get back.
And in this case, I'll set this up as an object.
So we're going to go here with CONSED and I'll call the squares and set with function.
And that one is equal to a used state.
And like I said, we'll set this up as an object.
And as far as the properties, the names are very, very, very important because they will have to
match exactly to the names that will add to our input.
So in here I go with the amount and by default I would want to set it up as the.
Then I'm going to go with category category and I want will be sports by default and then the last one
is difficulty.
Again, the name is very important because they need to match.
So this one will be equal to easy.
And you can kind of see already that we are using the same names, what we have in the euro, because
like I have previously already mentioned, once we submit the form will construct our own YORO the moment.
Of course, we're just hard coding and just getting the same 10 questions about the sports.
But what we would want is to have one and one user can pick well, which questions he or she is going
to answer.
Now, like I said, we won't use the user factor anymore so we can just get rid of it.
And instead we'll set up two placeholder functions.
One is going to be handle change.
And again, I'm just doing that so I don't have to hop back and forth in handle change.
I will be looking for event object and I'll just cancel log here.
And also I would want to go with const and let's say handle sub met again.
This is going to be the case where we would want to get the event object and will right away prevent
default like so we invoke it beautiful.
And of course now we need to parse these things down.
So where we have the provider, I would want to parse down the squares that handle change as well as
handle it.
And once we're done over here, course we navigate to the set up form component.
So I think I can close the objets and model for now.
And we're looking for the set up form.
I already have used global context and then inside of this component, we just need to structure a few
things out of our global context.
I'm looking for my quiz.
This is where I have all my values that I'm looking for a. change and handle submit.
And lastly, I also would want to display the error.
So I'm going to go with error and that is going to be equal to use global context.
And then we invoke it now as far as the return would go with mine.
And then inside of the mine, we'll have a question or I'm sorry, s. we a class of quiz and quiz small.
So am I wrong here?
Let's go with form with a class of set up hyphen and then form.
Now, as far as the action, we can remove it.
And instead of the form, I would want to set up my three inputs.
And here I'm going to add a comment.
I'll say amount and let's just go with this with a class of form and line control.
And instead of this one control, let's add a label and the value will be amount because that is going
to be mighty.
And also a number of questions.
And like I said, we're going to have the input and the type will be number, type is number.
And then name again needs to match exactly what we have in the state.
In to state.
I have three values.
I have mount category and difficulty.
And when we're setting up this name, the value needs to match.
Otherwise functionality won't work.
So in here, let's say amount and I will also be a month.
So and when it comes to the control, then of course we remember that we need two things we need to
value and that one will be equal to Cui's.
And that amount, which remember is then of course, as well as the Ondrej and in this case on change
is going to be exactly the same for all of them.
So that way, if we need to make some changes, we only need to do it in one place.
And then I would want to add some success as well.
So I don't know at the end or whatever you like, let's add a class name for input and that one will
be form hyphen input.
And, you know, since it is a no input, I will also add two attributes for Min and Max, something
is going to be one and then Max will be 50, whatever.
Something like this.
Let's add one.
And there is, of course, now we have a number of questions that is our input.
And, you know, right above the amount is also going to set up.
Having to set up online courses is now I do need to copy this, but will be setting up the select.
So, you know, now we'll just write it from scratch.
I thought I'm going to copy this, but doesn't make sense as this is an input for.
No, but we need to set up to select boxes now before I set up those black boxes just so it's easier
to navigate around.
I also want to display the error as well as the submit button.
So in here, I'm going to set up my conditional rendering because I only would want to display the error
if the error is there.
And then remember, the case for error was if the API doesn't return, the questions that we're looking
for.
Correct.
So in here, we're just going to go with error.
And if that is the case, then of course, I would want to display my paragraph.
A class name is her.
And as far as the text, we're just going to say can't generate.
Questions.
And the comma, please, we try try different.
Options like so, and I'm still within the form, I'm going to go with Button now, the button will
have the type of summit and when it comes to unclick, once we click the button or I would want to go
with handle met.
And then lastly, I would need to add some value here.
So it's a start.
And also I would want to add a little bit of styling.
So we'll say class name is equal to Smith and then hyphen between.
We save it and of course we cannot see the error.
But if you really want to start out, go back to the state in a global provider and just say true.
And now, of course, you should see the error.
Now, again, the error is going to be in the case where the API cannot return the questions.
So it cannot generate those questions.
And then, like I already mentioned a few times, we'll have to set up our select one is going to be
for the category and the second one will be for the difficulty level.
So where I have the control right after it and before the error, I'm going to go with another Dev again.
The class name will be form control.
And, you know, in this case, I will add here the comment as well, just so it's easier to navigate
around the project later.
And I'll call this category and you can probably already guess that this is exactly what will be setting
up.
We have label now.
The idea will be category here.
And instead of the label.
Right.
The same thing category.
And we're going to go with select.
And for to select again, name needs to be exactly the same category, because that is my in a state
and then when it comes to ready again category because for the label, I already have the acronym for
ATTRIBUTE set as a category and then I would want to have form input again.
So the styling here, last name and then form input and also let's set this up as a controlled input.
So in this case, I'll scroll up a little bit just so I can save some time on typing and then copy value
and line on change as well.
Now the change won't change, so I will stay the same again, the same function.
But when it comes to value instead of amount, of course what we're looking for is the category.
Correct.
And then instead of the select, we just need to set up our options.
So we go here with option and put option.
We need to pass in the value which is going to be sports and whatever text would want to showcase.
So in my case, since I would want to showcase the same thing, I go with sports as my text values all.
But I'm going to go to two cursors and we're going to go with history.
And here.
I'm going to go with politics and this is going to be the case where I'm going to set up only three
categories now, eventually I'll show you why.
Why, I'm not going to town and setting up all of them, and of course, at that point you can make
a decision if you want to go back to API and get the value that is necessary, you can add more categories
as well for time being noticed and sports because in the context of sports as my default one.
So if all changes category around, for example, to the politics, because the politics will be selected
here and we have the category, let's copy and paste it there.
So the last one will be difficulty.
So let's say here difficulty.
And what I'm going to do is pretty much select everywhere where I have category and just change it to
difficulty.
So everywhere where I have the category, let's go with difficulty.
OK, so and out here, select.
Select on it should be easy, correct?
Not at the moment, we don't have the value here.
That's why, of course, will change these rules around.
It is not going to be sports and history or whatever.
It's going to be easy.
Easy and hard as well as media, so let's put medium, second, medium.
And then the last one will be a hard one.
Much more hard and let's see, of course, again, the value is easy, so when it comes to select,
we go with already some kind of name and needs to match to whatever we have in the label.
Then we also have name since we'll use this when we're changing something about our form.
And you'll see that in next year.
And I would want to set this up as a controlled input.
That's why good value.
And I'm checking for the highest value in the state and the property that I'm looking for is difficulty.
And then on change, of course, will be invoked every time I change something about this select.
Now, again, at the moment, nothing's changing because there's nothing there as far as functionality.
But eventually it will be.
And of course, inside of the select of these options, we go with option and then whatever options
I would want.
Now, in this case, of course, since we're working with API, you need to be correct because, for
example, categories match exactly to what the API is providing.
So if the API doesn't have the category of history, then of course you cannot add it because the URL,
of course, will be incorrect and the same goes for difficulty.
I know that in the API I have easy, medium and hard.
Those are my options if I wouldn't have that.
And of course, I wouldn't be able to get the questions that I'm looking for.
So if you had some kind of medium hard category, it is not going to work.
Hopefully this is clear and we're ready to start working on our handle change functionality.