Okay, let's talk about state.
Now, I mentioned state before and I said if you would like to use a state, then you need to go for
class based component because in the functional component, as we use in a header here, we don't have
option to use the state.
So basically this is stateless components and the class based can contain a state.
What is state and why this is used?
Basically state is very similar to the props, but the props are immutable, so that means they cannot
be changed.
So I can't go just to this value here.
And then like, for example, this trademark and change it because this is not allowed.
So if we would like to have something in the component that will allow us to change and keep the state
of this component, we need to use a state and in order to use a state, it is as simple as using keyword
state like that and then equal to and curly brackets.
So inside, inside state, this is our object of the data we would like to keep or maintain in within
this component.
So basically what we can have, we can have, for example, text, whatever we can call it, whatever
we like and let's say call it name like that, and I will put my name here.
So what I have instead, I have a piece of information and I have name called Christian, and that state
stays with my component so I can reuse it and I can do something about it.
So I will use this input as we have it here for a show you how the state works.
So basically what we can do is we can assign our move this to next line and here I will do a value.
So this value will be this state, and then I will do dot and you can see here name is one of the property
I can use.
This is the name here.
So what I can do here is similar way as we do with this props and this props coming from outside to
our component.
But this state is inside, so this state name will be the value of this input if I will save it now.
You can see here, Christiane is printed inside our insert field here.
So it's still working the same way as we've done.
You can see here it's been changed and this is a trigger.
But this time we call this value here.
So let's say we would like to update this value state whenever we change something.
You can see here, change has been.
Trigger.
So this function is trigger.
But if I will type in here, I can see here it's incrementing, but not in.
It's changing.
Why is that?
Because the state is like that.
So it stays Christian all the time and we pass it value here there.
So even if we change it, it come back to this state because the state stays as it is here.
So nothing's change.
What do we need to do is we need to pass some information to this change, which is this function and
then we need to use it and change the state.
So we'll do that.
But I will show you we will have some problems.
So first thing is that if I will pass values like this, it will be trigger automatically.
I mentioned that before, so we can't really do this.
Another option is to use the event.
So if I will go name it event like this and I will try to print it here.
I will save it.
And you can see here I have synthetic event there and I can have all the information for that event.
So I have event, a target and so on.
The problem becomes when we would like to use at this inside this function, if I would like to refer
to this class, which is I need to refer to the state.
So if I would like to use this state name, for example, if I will duplicate this and I would like
to do.
This state and then name like that.
This will I will disable this for a moment.
And if I would like to do that now.
You can see here an error and this this error is cannot read property state of undefined because this
is undefined.
This refers to this function and not this class.
So what we will need to do is we need to bind this to this function and there is a few ways we can actually
do this.
So you could do this change and then you can do bind like that.
Bind.
This.
So basically what is doing that?
So I can do that and you can see it's working again.
So you bind this, which is the class into this, but the syntax is quite horrible.
So I am not going to use this syntax.
Now.
Another option will be to use the constructor.
You can go constructor and inside the constructor you can bind this change to this class, but the syntax
is even more terrible.
So I'm not going to use this.
Another option will be to use the arrow functions.
So this is normal function with a normal syntax like that.
But we can also use the arrow function.
Arrow function are very similar to this function, but we need to change it to so change.
This was the name of our function and it will stay the same as it is.
And then we pass some argument arguments and then we do equal and then greater than sign.
So we create kind of arrow.
And this is basically the same as the function word.
So the syntax is a little bit different, but this time we will have an access to this without binding
this.
So if I will save and then use it here, you can see it's working again.
So using this kind of syntax.
So we have name of our variable variable and we name it the same way as we name the function before
and then equal and that's our arrow function.
So it will be the same as the syntax function
like that.
But that will throw an error because the function has no death inside.
But using arrow function like this, we can use it.
Actually we don't need those.
But this is a single argument, so it looks a little bit weird.
But once you get used to it, it's fine.
So we have console.log state name and you can see here this is printed, so I will read remove it.
And for now and let's go back to our change.
So what is available on our event?
We can go target and then we can go value like that.
So I will do change and then value if I will save it now and then I will try to type in something.
You can see at the very end of this we'll have a change to the OSL and so on.
This is what I type in here, but it still stay and go back to the normal state because we put it here.
The value, even if we change it and we have a new value, we pass it here and it reset back to the
value of this state.
So what we need to do is every time we change it, we need to update the state.
So normally the intuition is telling us, okay, we know how to update this state and then name is equal
to something and then we can get the value from here.
But this is not a proper way to do it.
And so if we will do like that, it's not a proper way to do it because we should not access the state
like this, set the state.
We should use a proper function for this.
So instead of that, we can do this set state and that's a function.
And inside here we can pass it.
So we do object and then we can do name.
And then this value.
So what I'm doing here is I'm getting this new value, which will be already with my new letter.
And then I set the stage of this.
I set the state of name to this value.
So if I will save it now and then I will do.
Christian you can see I'm updating the state.
So if I will go, if I will take this.
And put it here.
I can do.
Let's print out this state and then name like that.
So I'm trying to print a state.
Now.
You can you can see here this is a printed.
So my state is changed and we trigger that here.
So we do this set state and then what property I would like to change and then the value of that property.
And this value is coming from this event which is on change.
So we pass this value to the function.
This function set a state in here.
So in fact in state we can have local variables and local state that we will do something about it.
So the functions are stateless.
They don't have a state and they can't contain a dynamic information and the class based components
can have a state.
In fact, we don't need to restrict to just one.
We might have multiple so we can have age and so on and so on.
So basically the state is the way to hold our data in the component and do something about it.
So whenever we would like to refer to our state, we do this state and the name of the this variable,
which is this.
And then if we want to change it, then we use the function, this set state like that.
And this is the way to handle the information inside our components.