All language subtitles for 038 useState - Simple Use Case.en_US

And once we're familiar with a set up, of course, we'll start by looking at the used state hook,

sounds like I just mentioned the U.S. state as well as used.

The fact are going to be most used.

However, before we do anything.

Let me just showcase why we would want to use you state in the first place.

Now, this is just going to be a basic example.

Please understand that, of course, you state can do way, way more than that.

But I think it's going to give you a good idea why using U.S. state.

Is necessary as our applications get bigger and more complicated, so the file that we're looking for

is going to be located in tutorial folder online.

We're looking for use state and then we have the final one.

So that is going to be our complete code and then we have to set up one.

So this is where we'll do our work on the file we're looking for is this error example just now.

First, what I would want in the app, jazz, though, is to set up the container.

Now, why do I want to have a container?

Because it's just going to have a little bit of styling if you navigate to, as you'll notice, the

container class.

And I just added a little bit of styling.

So I'll add that container for all my examples.

Just please keep in mind it doesn't affect the functionality.

It just affects how the examples are going to look like.

So if I navigate back to jazz, I'm going to wrap all my examples into this container.

So what I would want right now.

Is where we have the return, which is going to go with Dev and then within is there for the time being

just the showcase that nothing will change our place of the setting to.

So let me move up the center now.

Of course, I need to set up a proper return and all that.

And once I do notice, like I said, if will just this class name of container will get a little bit

of styling.

So essentially I'll place all our examples in that container so that work is just going to look a little

bit better.

And then in order to work with our files, we're looking for this error example.

Just now, all of them have been set up as default so we can name whatever we would want.

Now, in my case, I name them explicitly what we're covering in that particular video.

So, for example, if this is our example, I went with explicit name.

Now, of course, if you want, you can shorten this up in the objects that is up to you.

In my case, I will call all of them set up, meaning as we move from lecture to lecture, I'll keep

this name off up.

And then the only thing that will change is the file where I'm getting the component.

So in this case, of course, I'm looking into the area folder that I'm navigating to use state and

then I'm looking for a set up, like I said, and then I'm looking for the error example.

So that's the component I would want to work in.

That's why I'm importing into abcess.

And then I'll just place it in the container so I have my set up and I'm good to go.

So what you should see on screen is the text of your state, her example, if you see that, that is

awesome, because that is the file that we will work.

Now, if that is not the text that you see, then of course, make sure that your import is correct.

And like I just mentioned already, three thousand times, if you would want to see complete code,

you're looking in the same folder in the U.S. state.

How are you looking for the final folder and then error example address?

So the filenames will be exactly the same.

The difference, of course, is that in here you can see the complete code.

So, for example, in the app, just if you want to see the complete code, what you could do.

Is simply go with import again, whatever name, because it is default, so my guess I'll call this

final from and then again, we're looking for a tutorial that I'm looking for you state and I'm looking

for final and then error example.

So right below the set up, I'm going to go with my final and you'll see the complete code.

OK, so this is what we'll build in this project.

Now, the reason why I'm showing you that, because that is going to be our setup for the remainder

of the advanced tutorial videos where essentially you'll have one set up file and then the final one

where you can see the complete code.

So if you ever want to run what I have built, then of course just import the final.

So that is going to be coming from the final folder.

But the files that we're going to be working are going to be coming from the setup.

So hopefully this is clear so I can remove my final and finally we can start working in our file in

the jazz.

So let me navigate there the error example now, of course.

Notice that this is the complete one.

Now, that's not the one that I want.

I want our example just where I just have the U.S. state our example and what I would want to build

over here.

Well, I would just want to set up some kind of logic where once we press on a button, we would change

the name.

So what am I talking about?

Well, in here I could go with that title.

So some kind of variable.

I'll call this a random title.

And where I have my dress, I would want to have some kind of return.

So in this case, what I'm going to do is use the react fragment again.

I just don't want to create this soup.

So I'm going to go with react to that and then fragment.

And then when this fragment lets go with heading to and I'll look for my title, remember.

And we needed to use the curly braces in order to access the variable.

And of course once I do, I have my random title, Beautiful Life is great.

But what if I were to add a button.

So I'm going to go here with button, I'll type of button as well and I'll add a class name.

Now this class is coming from my infectiousness again.

If you want, you can check it over here and it just adds a little bit of styling in the class you're

looking for is B10.

And let's set up a on handler.

And of course, we'll have to set up a function, so call this Handal click function and within the

button, I don't know, let's call this change title.

Let's say right now there's going to be an error because, of course, we haven't created a handle quick.

So do that.

So can't handle that.

Click Nevada is my function beautiful.

And now what I would want is to change this title from random people to something else.

Now, first, let's just see whether we can access the title.

And of course, I'll open up my console and let's see what do we have in a console once I click change

that.

Of course I can access the random title.

How old?

The idea was that once I click, I would want to change it to something else.

I would want to change it to help people.

So let's try whether we can do that.

I'm going to go here with title.

And line hello, people.

Now, my question to you is, once we click the button, the handle click, do you think the random

title will be updated in my component?

Then the question is, once we click the button, notice I'm changing the title, so do you think we'll

change also the value that we have in the dress?

Well, let's try it out.

We have random title.

I click on Change title and nothing happens.

And what's even more interesting that technically you can see in a council that we change this valley,

correct, because in here it is title and it is random title and of course, we change it to help people.

Now, once we come to log, it is how little people.

Now, the problem is that we are not rendering the component.

So we change the value and we're not rendering the component.

That's the reason why we cannot see any changes.

Now, the second thing is that we have no way to preserve this value in between the renters as well.

So essentially, we would want two things.

We would want to keep the value between the renters, but also we would want to trigger that.

Or and this is where the U.S. state comes into play, where it will allow us to do just that.

Again, very basic example.

Of course, you can use you state for more than that, but this clearly shows us why we would want to

use the U.S. state in the first place.