Come back in this video.
Let's get started with how we can use use date.
So because we are starting with a new concept, maybe thinking, yes, you need to create a folder for
that.
Hey, so inside the components, let's create a new folder and call it ask use states.
And then let's create a function called you states, does JS and r a f, c e and I have my state.
So let's add H to here and say use state.
So let's go ahead and mount the component inside my app going to be use.
You stay.
Don't be confused with the you that come with the let me get as you state component to be more precise.
Components.
Yeah.
So that it's no conflict with what we are going to some renaming back to.
Components and here to add component you state component.
So let me render that instead of events, let's render the use that component and now I have my use
states.
So we are going to play around with it by creating some simple application called counter application.
So in this one you are going to display a number of counts when a button is being clicked on.
So you state simply means that managing state in a specific component, the state that is being assigned
a component is specific to where it is.
So how can we use you state?
Like we said, we need to require the hook so command and unless the structure that and get the use
states this form react so now you call it a function you states like this one then you pass in the initial
state of value of your component based on how you want it.
Let's say that you want to keep track of log in uses, right?
So initial state it can be false.
Is logging false or true?
But because we are talking about or dealing with how to create a counter application and count application,
there is numbers, right?
So we can say that our initial value of the counter supposed to be zero is zero.
And now what comes back from this you state is you have access to two things and they are in array is
equal to that.
The first one contains the initial state so you can name it whatever you want, but this one represents
this one represent the initial state here.
And then let's say that you want to update this, find this data, this counter.
Let's go to from 0 to 1 to 3 to 4.
We have a function that's going to make it done.
We often use sets in the name of the initial value set count as that's the name convention.
So now if I console that, log the counter the count, let's say you're going to see as what, zero.
So check the console and now this one.
Check it out in your console.
And I see we have RS Zero here.
So now, instead of dumping to the console, let's place it inside.
Let me call it here as.
Let me call us counter up.
Going to app and now let's ad phh2 or three, h three.
And then let's say the counter is.
And now we can inject the counter or the count.
So if I save it now, let's see, let's refresh it.
And I have count zero because it has initial value of zero.
So I make it at 200, save it, and now we have 200 as my initial state.
So if I want to increase from 0 to 1.
That's where we need what is called the set count state.
And in this video, I'm going to create a button here.
When we click on Mitt, then we're going to increase the counter.
So let's get going in the next video.