Wonderful.
And wants to form Rome as well as alert are set up as separate components so we can use them all throughout
our application.
Now it's handled the toggle member functionality.
Now why do we have it?
Well, first of all, because when we'll register, we want to pass in three values name, email and
password.
But then once we want to log in, then we are only looking for a password and email.
And like I said, we're controlling multiple things.
First of all, we're controlling the input, whether we display it or not.
One second.
Nowadays, steering through our control it every time a click.
And then lastly, once we submit the form, there's going to be a difference which function we invoke,
whether we set up a register request or it's going to be a logging request, which again, we don't
have a server yet, so we're not going to worry about that right now.
So first, let's navigate back and let's see what we need to do.
Well, there has to be a function correct that controls that and not since I have the object.
Like I said, we'll have to do a little bit of trickery where I don't want to replace everything with
just is member and set it equal to the opposite value.
I actually want to get the current values, one that I have in a state.
So those ones all stay the same and only is member is going to be affected.
And then I'll sort of equal to another value.
So if it's true, I'll set it back to false and hopefully you get the gist one in return.
There's three places where we all heard about first, when it comes to our heading three.
We'll set up a condition.
I say, Well, if the value says member is true, then we display login.
Since the user is already a member.
If it's false, then we'll display a register.
And the same goes with input where?
If the values of member is false, meaning if the user is not a member, then we do want to display
the name because we will send it with our request.
And thirdly, there's actually going to be a paragraph which is going to be right after the submit button.
So right after the submit button, we want to create a paragraph.
And then instead of that paragraph, first of all, we will have here a button that runs the function.
So on click toggle member, the function over here and there's going to be type.
Yeah, that stays the same.
It's also going to be a member button.
That's the class that starts everything.
Yep, we don't care about that.
But then the text inside of it, we want to control again, even the IS member, Astrue said at the
register.
If not, then it's logging.
And the same thing we can do over here with a paragraph.
If it's a member and there's going to be one text, if not, then there's going to be something else.
So let's navigate back to the register.
And first, let's set up the function, and in my case, I'm going to do it above the handle change.
So what we're looking for is constant and the toggle member, and then it's going to be a function.
I'll set it up right away as an arrow function.
Like I said, since we have here a state as an object, we want to go dot dot dot, so spread out all
the current values.
And since my state is called values, that's why we have ours here.
And then let's also go, what is member?
So that's the one we're controlling, and we want to set it equal to your opposite.
We're going to go with values and that is member.
Let's say this one here, and then let's keep on scrolling.
And like I said, right after the button, we're going to set up our paragraph.
And for the time being, let's just go with button side of it.
And then let's add here, a type button now will be, of course, equal to a button.
Then we also want to set up that on Click.
So every time we click on a button, we actually want to toggle the number.
So let's say here toggle number, and that's also the styling, right or so class name, and that will
be equal to a member hyphen between.
And then lastly, inside of it, let's just say for now registered.
But like I said, there's going to be a little bit of logic there.
So let's say that I want and I do have the register now, let me navigate to the big screen just so
I can see the toggle.
So I have here is member.
And once I refresh, I should see my target button.
I'm not in the state.
Check it out now.
Every time we click the button, we are actually toggling the member.
So as I'm clicking.
Notice how the value is changing.
Four is member and now we're going to start using that in our return.
Where I'm going to scroll up, I'm looking for two heading three.
And let's set up our condition where we're looking for values dot and is a member.
If it's the case, notice here how we're using ternary operator.
So if it is a case that the value true, then we'll display logging.
If not, then we'll display register.
Let's save it and now notice once a click.
I'm talking the value when we want to do the same thing with our name input, where I'll say if it is
false.
So if values is members false, then I want to display that.
So only if it is false.
So if it is a member, then we're only looking for his email and password.
So let's get it out there.
And let's add here and let's copy and paste.
So now, since this is false by default, that's why we can see.
But if I'll click it again, notice how actually we're not showing the input.
And lastly, back where we have the paragraph first, I want to add text.
So it's going to look something like this or we have not a member.
And then depending on that, we'll also display already member and the same is going to be in the buttons.
So let's start here with our paragraph text, then values is member.
And here again, I'm going to use the ternary operator.
However, we need to keep in mind that the values will be opposite.
And if this doesn't make any sense right now, I'll showcase that once we have everything working.
So if his member is true, actually one in the split, not a member.
Yet.
And if the user is not a member, then we'll say already a member and a question mark, and then the
same thing goes over here with a member button where again, I want to set up my touring operator.
And if the user is a member, then register.
If not, then log logging.
So values.
That is member.
And then let's go without territory.
And then let's say I register.
And also, we have a long term option.
And once we served notice, the reason why we weren't here with opposite values is because I'm signaling
that I'm going to be switching to register, correct?
And if that is the case, then I want to display not a member.
However, if the user is looking at the register option and he or she is already a member, it kind
of makes sense to display that.
That's correct.
And here I'm signaling that I will switch to a longing, and this one is pretty straightforward, and
it looks like I forgot to add here a question mark.
So with me on that one.
And with this in place now I can toggle is member property in the state and in the process.
We're changing the values and heading three.
We are toggling the name input as well as the text inside of the paragraph and member button.