All language subtitles for 039 useState - Basics.en_US

All right, and once we have covered why I would want to use you state now, of course, and let's learn

the basics about the U.S. state and here's what we're going to build.

Let me just quickly show you we're going to go with Important again.

I'll call this final from online.

We're looking for tutorial folder and your state of mind final and land use state basics.

Now, since I named this final, of course, right after the set up, can just go with final close out.

And this is going to be our component.

We have random title.

And I notice how once we start using you state, not only we can change the value and trigger render,

but we can also preserve the value in between of the Randers.

Again, this is just showcase that you can always take a look at what we're going to build, but.

Of course, the father that we're looking for is a bit different, again, I will still call this set

up because it's just easier.

However, I'll change the path where I'm looking for a set up folder than instead of folder.

I'm looking for use state basics component or file.

And of course, you should see on screen use state basic example.

And let me open up the sidebar.

I'm going to navigate over there and essentially use state is a function and it is a function that is

coming from here.

However, notice that it is a named import.

So unlike react, this is the named one.

So we must, must, must, must, must have the collaboration.

And then the name needs to be exact where we go with use state.

Now just to prove that you state is a function, we simply comes along and we are right you state and

you can clearly see that it is a function.

Beautiful.

So once that is clear, once we know that you state is a function.

Now let's see what of this function returns because that is very, very important.

SERN here.

I'll just invoke it and you'll notice something interesting where it returns an array and first thing

is going to be undefined.

Essentially this is going to be the state value that we're going to years and the second one is a function.

Now this function will control this value.

Now you're probably wondering, OK, why this is undefined.

Well, because when we invoke you state, we need to pass in default value.

Now, keep in mind that this value can be a string.

It could be a number, can be an array, it can be an object, can be boolean whatever JavaScript value

you'd want.

So, for example.

If all past year, hell of world, which you'll see that our value now is a strength, so that is my

default value.

And then again, we have this function and from this point, we have multiple ways how we can access

that.

Because keep in mind, if you state returns an array, of course we can assign it to a variable.

Correct.

So in here I could go with and that value is equal to my user state.

Again, we would need to pass in some kind of default value.

So for now, I'll just pass.

No, just I can see that of course we can pass a number as well.

And then in order to access the first item in the array, we would go with square brackets and then

the zero.

Now let me copy and paste and in here I'll set up my function, since that is going to be the second

thing that I'm looking for.

So I'm going to be looking for the handler.

And of course, I'll change this value as well, where now I'm looking for my function for the second

item from my array.

If all comes log, if we go, for example, with a value and a handler, you'll notice that the value

will be one.

And then the second value will be that function, the function of that control, this value.

Now, I fully understand that at the moment it might be a little bit confusing.

Don't worry.

Just remember that this handler will be the function that controls the value that we have in our state.

So in this case, of course, this is one.

And in our first example, this was a world now all of this is beautiful, but what I would want is

to select all of these and then just comment them up just so you can stay for a reference.

If you remember, we had already this structuring.

Now, what that allows us to do is set up everything in one line where I'm going to go with CONSED and

then I would need to come up with a name for my state value.

So this name could be anything.

I will name this text.

Just keep in mind you can name is Bobby, you can name Apple, Banana, whatever you want, so I'll

name my first value text.

So that of course will be my state value and the second thing is my function.

So now of course I need to name that function.

Now a common convention is using set and then whatever you name your variable.

So if you named your state value, for example, text, then you go set text.

If you would set this up as Apple, you go to Apple and said Apple.

Now, again, this is a convention.

You can name this taco and burrito.

It doesn't matter.

And then for destruction rules, you need to set it equal to your right.

Now, of course, our array is coming from you state.

Then we need to invoke it and then we need to pass in whatever again is going to be our default value.

Now what is going to be our default value?

That will be that random title.

And once we have this set up now, let's try it out in our return.

Again, we'll have our desex, of course, again, I'll go with react fragment just so we can keep on

practicing.

And then in here, let's use the heading one instead and I'll look for my text.

So that is my state value.

And just to showcase that, we can place whatever we would want or here I can just change it around

to a one or ten or hundred nine, something like that.

And then of course this value will be displayed.

Just keep that in mind that whatever value would want as default on, you can set it up with a radius

and.

All right.

Whether that is an object string, no boolean or whatever.

And of course, once I have these two things.

Now, we would need to come up with the button, correct, of the button that can change this value

because we saw previously how we are not able to do that.

First, let's come up with that button.

And in here, I had a class name was Surbiton.

Just so we have a little bit of styling and we'll do the same way and we'll have a unclick and then

we'll pass and handle and then click now within the button.

All right.

Change I like.

So and again, there's going to be an error where Handal click is not defined.

And now, of course, let's set it up.

I'm going to go with Hanle click.

I'll probably add Consed over here and then we'll pass and our function, and then in this function

I will finally use this set text and the way it works, we have multiple ways we can do that, how we

can pass the new value.

And a little bit later on we will look at the functional example.

But for the time being, let me just go with text and then whatever will pass it in here now will be

our new value.

So, for example, if I want to change around the world, I just need to pass in that string where if

I say hello world, now what?

You'll notice that once we click on Change title.

Of course, we invoke the little click and then in that click, we have our set text function.

So the function that we're getting back from the U.S. state, we get back that function and then each

and every time we invoke this function, we can change this value.

So there it is.

Once I click Norrish now nicely, I see my hello world.

Now, of course, since I don't have any more logic, then every time will click after that is just

going to be this whole world.

But at least we already made good progress.

Correct, because previously we were not able to do that.

Now of course we are where once we click on a button, we change this again.

We can refresh, we have random title and once we click and of course, it is going to be a whole world,

not just the showcase that we can set it up, as always, to whatever we would want, just like with

the default one.

If I go to one of nine, you'll see that I have a title when I click the button.

Of course I have one on home.

All right.

Hopefully that is clear.

And now let me just set up a little bit of if and I'll statements.

We're essentially depending on whatever value I already have, I'm going to set my new value using set

text.

And the way I can do that is I can say if and then I'll check what is the value for the text and if

it is random and then title, then of course I would want to invoke set text and I would want to set

it equal to a hello world.

However, if that is not the case, essentially, if it is already our world, well then I will just

set it back to a random one.

So go text.

Than random and entitled.

So now you'll notice that we'll have this toggling functionality where I'm changing the title now of

course it is going to change to Hello World Beautiful, we trigger or render.

And then, of course, again, once we click, we have random title Assim.

And this is how we can use the use that again.

It is a function that we get from react once we invoke the function we would need to pass in default

value, whatever we would want as far as string number, boolean or object or array.

And then from this function, once we invoke it, when we get an array with two values, we use a right

to structuring because it is just faster.

However, we can also do this manually.

Where we get that particular value and the function of that controls that value and each and every time

we invoke this function, whatever value will pass and now will be that new state value.

And of course, in order to access it, just like with normal variables, we just go with whatever name

we pass.

Here again, please keep in mind you can name these things however you want, but a common practice

is using set and then whatever name of the value that you already set it up.

And then of course, each and every time we click the button.

Notice how we invoke our text and we keep on changing the state value.

Beautiful.

And those are the basics of use, state hook and react.