All language subtitles for 044 Simple Counter.en_US

Not bad, not bad.

I think we're progressing nicely with our used state examples and in our last example, our own showcase,

how we can work with numbers and not only how we can work with numbers, but how we can set up a functional

update.

For all this time, we have been using the value update.

Now, what that means is where we have this function, the subtext or whatever function we get back

from you state, we just call the function and then we pass in that new value.

And that essentially sets our state equal to that new value.

However, there's also a method of passing the function, and in the following videos, I'll show you

why that is important.

But first, I would want you to head back to Objets and then import again component.

You can call it whatever you want from your state events that are polder and then the file name is used

state counter, essentially that he is going to be our last file.

However, I'll split this up in multiple videos because I would want you to get a better understanding

of what we're doing.

So once you import of this file, then just navigate there and you should see on a screen you state

counter example and you can probably already guess that we are going to create a counter with not just

a simple counter.

We'll have one we straight up values and the second one we'll use of the function.

Now, we'll start with our turn first, though, where it's not going to be adding to again, we're

going to go for a fragment so we don't need to overpopulate everything with this.

And then once we have our fragment, then I would want to go with a section.

Now, add a little bit of styling right here.

Where I'm going to say margin, and that is going to be equal to four arms and nine zero and nine within

a section, let's just go with heading to and I'm going to call this a regular online counter.

Or you should see something like this on screen now after the heading to I'm going to set up my value.

So at the moment, of course, we don't have anything, but we will use you state and you're not I don't

want to set up a state because that should take us a second since we already know how to do that.

So I'm going to go with value then set value and that is equal to you or your state.

And then as far as my initial value, what that is going to be a number of zero an now and adding one,

I can just simply target my value and surprise, surprise.

Of course I have the zero and all three buttons, one for increase, one for reset and one for decrease.

So I guess we'll start with a decreased one.

Let's go with button line class name that will be equal to Abedian.

And then let's just right here decrease and we'll just copy and paste the same button.

So on two and then of course three buttons total and we just need to change these values around where

we're going to go the reset as well as the increase.

What just go here.

And again, I know I've covered this before, but I'll set up two ways how we can click on a button.

One is going to be with a function here.

So where we reference is, for example, would reset and a decrease and increase is going to be within

line functions.

Just showcase again that you always have multiple ways how to set it up.

And essentially it is up to you now.

There's going to be some cases where you definitely need to use the inline when you are actually passing

in, but then in some cases you can simply use the reference and you're good to go.

So we have our buttons and like I just said, will go with click and then set up in line function here

where we go, it set value and now I'll use the old value, let's say value, whatever it is.

Of course at the moment it is zero and then I'll say minus one because of course the button is decrease

and we'll do the same thing here.

We have an increase and we'll copy and paste.

Now, of course, now the value should be plus one.

Correct.

So once we click on a button, I would want to invoke my sole function and line whatever is the value

and then plus one.

And like I just said for the reset, let's set up a reference just so we are all on the same page,

that we have multiple ways how we can get the same result.

So I'm going to go here with reset.

I'll have my function.

And then within this function, I'm just going to say set value again, my set function, and I'll set

it equal to zero.

And now where I have the reset, I'm just going to go with unclick.

I just need to reference the function.

So in this case, of course, it is a reset.

And then let's start out so once we're clear, of course, notice how we can nicely increase, we can

also decrease and then we can reset.

So again, this is a way of passing directly the value in our step function where we pass, passing

the value.

And then the moment we do that, of course, that is our new state value.

And the following year, I would want to cover the functional updater form when essentially we pass

in a function and why we would want to do that in the first place.