All right.
And now let's finally wire everything up.
We're in the register.
I want to spread the word if one of the values is missing.
And first of all, we wanted to remember we have the handle change function.
And what are we looking for there?
We're looking forward event.
Now, more specifically, each and every time we're going to be typing something in input, we can set
the values.
Now, since we have the object, we want to return all the values that are in the object.
And since we have access to event target and then more specifically name and then the value, I want
to dynamically set that property with this value in the object.
Now, if you're somewhat iffy on this syntax, please follow this link where I explain everything in
great detail.
Basically, this is one of my JavaScript Nuggets video where I cover what are the dynamic object keys
and why we would want to use them.
Now, once we're done with that, once we can actually.
Change the state values in such a way when we want to get the display alert function.
And this is the case where I'm going to show you the code.
Just try to think that display alert is in the app context, correct?
And we already have ActionScript.
We're already getting two hours.
So now we just need to add that function.
Come on, submit.
We're still preventing the default, so we don't want to get the default behavior.
But then in there, we want access, name, email, password and remember, and then we want to check
whether the values are there.
And technically, you can make an argument that I can check for email if password doesn't exist or if
name.
But keep in mind also that I only care about the name.
If the user is not a member, remember if I'm just logging in, I'm looking for email and password.
That's it.
I don't really care about the name, since the input is actually not here at all.
So therefore, I'm going to go here with one more condition where I'm going to say, if it's not a member,
then I want the name.
Hopefully this makes sense.
And if that is the case, then we want to run the display alert.
So if everything is correct, we should see that alert.
Correct?
Right.
Eventually, we also want to log the virus if everything is correct.
So let's try this out.
Or first, let's go to a register that's keep on scrolling and then remember the handle change.
Remember how we will logging?
So now what do we want to do is to go with set values.
And then since I don't want to overwrite the values, we're going to go with dot, dot, dot and then
values.
So that gets me all the current values that are in the state comma and alerts dynamically access the
property that is equal to a name of the input.
So that was the whole point why we were passing them in.
Notice how they match exactly what we have in the state and the way we do that we go here.
We have a square brackets.
I'm just passing in as event target and then name.
Now that will be equal to event, target and value.
Again, if you need a refresher on why you would want to access the keys in such a way, please reference
the JavaScript Nuggets video.
And with this in place, we can actually test that out quickly.
So let me navigate here the big screen here and then notice if I'm going to be typing something on email,
I'm going to be updating mistake.
Correct?
So if I'm going to be typing something in the password.
Also going to be updating that volume state.
And the same goes for remember, of course, because that one we already set up before.
So once we have this functionality in place now, we're just needs your work on the submit.
Like I said, we want to set up the condition where I want to check for the values, and if one of them
is missing, then we'll throw the display right now before we can do anything.
Remember, we need to get it from the context.
So we're going to go after Charlotte and we'll go with the display, an alert about the function as
long as we're passing it from the context we should be.
So let me save this one.
And what I'm looking for here is the on submit.
And then like I said, let's first grab those values from the state.
Let's structure them.
I think it's going to be faster and then let's check for the empty ones.
So if your name more for email, I am looking for a password and also is member because depending on
this value, we will call a specific function that is coming up for now.
Now, once I have pulled them out, when I want to go with if and then if the email is missing, then
I want to throw this one.
Same goes for password, so just say your password.
And then like I said, I also want to do the same thing with the name, but only if it's not a member.
So say here if it's a member, and then I'll go with the name.
So only if the name is missing when we want to display the alert, and now it's called a function.
Notice how we don't need to do anything and I'll return it.
So I'll say, if this is the case, let's return now.
If it's not a case, let's log the values.
Let's say here values.
And now let's start out again on a big screen.
Since we have a little bit more room over there.
So I have a console.
If everything is correct, once I click, yep, I have the error.
Why?
Well, because we haven't provided the values.
However, if I'm going to go here with something, let's just say email and learn some kind of password.
Now, I believe we'll have to add here, at least.
Otherwise, there's going to be a bug.
And if I click, everything is going to be fine.
Why?
Well, because I have is member true.
So this is going to be a scenario if the user.
Is already a member now.
We still have the alert.
We'll work on that one next where we actually dynamically hide it.
But let me just start out one more time where if the user is not a member and I try to do the same thing
where basically I'm going to go with email at Gmail and then provide some kind of password and let's
try to submit now have all the values and only if I either switch to a log in or if I provide the actual
name, then everything is going to be fine.
Again, this alert will stay for now.
We haven't had to know that yet, but if everything is correct, notice how now we are correctly console
logging everything.
And with this in place now, we can start working on high alert functionality.