All language subtitles for 004 Getting Started with useState()_en

Now, it is worth mentioning that I also touched on Hooke's throughout this course, so some of the

hooks all dive deeper into you in this module.

Are Hoxha already mentioned throughout this course, but then I always mentioned that we will dive into

it later.

Well, now is dead later.

Now we will, David, in more detail.

And let's start with the ingredient foreign Jaspal there.

We have a couple of inputs.

And one thing we typically would do here is that we binde input the user enters to some state, to some

state property, and we update that state on every keystroke and then sent the value back into the input.

That's that two where binding you'll learn about in this course.

And we did this multiple times when we work with inputs.

I want to do the same here because ultimately it all starts in disappear with us gathering the user

input so that we can make does add ingredient button work so that we do something useful when there's

buttons pressed.

Now, if you wouldn't know about Hooke's or if you would use react sixteen point seven or earlier,

then you would have to transform this to a Class-Based component and use state and set state there.

Now with react hooks, you don't have to do that.

Instead, you can import something new from react by not just importing the default export, which is

that react object, but by importing a named export and that is use state.

I mentioned that all these hooks start with use and then they have various names.

So here it's the use state and this is a crucial probably the core hook provided by REACT.

It allows us to manage state and functional components.

It works a bit different then state and Class-Based components, but we'll see the difference in a second.

So how do we use it then when we go into our functional component?

And that's important.

You have to use it in your functional component body, let's say here and we call it we call use state.

Now, that alone doesn't do much, though.

Use state can be initialized with a default state and debt state can be anything, can be an object,

can be an array, can be a number, it can be a string, a boolean can be any value.

It doesn't have to be an object.

It can be any value.

So here we could create a new state that should manage to input for the title and the amount.

So let's create an object here again.

Doesn't have to be an object.

I choose to use one here because I have two values which I want to manage and that would be title.

And initially it's an empty string and amount and let's set amount also to an empty string.

Now, you could argue that this should store a number and hence you want to set it to zero or something

like that initially.

But actually managing this will be easier if we said to a string because input elements, the values

of input elements are always strings, even if it's of type.

No, we'll always get a string.

If we would want to work with a number in our app, then we would simply have to convert that value

whenever we use it.

But when we fatchett when we manage it, managing it as a string avoids some strange side effects where

we might not be able to edit this value in the way we want to.

So both values here are strings.

And now, of course, the question is what does this get us?

What does this use state call do?

Because just that alone, of course, won't set a connection between, well, our state we're trying

to manage here and our inputs now use state actually we return something.

This here might be complicated to read, but this in the end describes how does function to use state

function is defined.

And after this colon here we see the return value and we see that the return value actually is an array

and it's an array with exactly two elements.

And that's important use state is built in hook, always returns an array with exactly two elements.

The first element then always is your current state snapshot, and whenever your state updates to which

I'll come back in a second, this component will rebuild.

So this component function is really executed and use state, of course, there for all those executed

again.

But react internally saves that you already configured a state with the help of use state for this component

and will not reinitialize it, but instead use state manages this state detached from your component,

so to say so independent from your component, so that the state survives renders of this component,

so that the state survives when component function gets executed again and therefore use state does

first value which is returned.

Here is your current state snapshot and it's a current state snapshot for this Rivendell cycle of this

component.

This means that when you update the state, you'll get the updated state here.

So you get back in the rain, you state and Dederer has two elements in.

The first element is always your current state snapshot ever the initial state or if you changed it,

the updated state.

That, of course, leads us to the question, how do you change the state?

How do you update the state?

And that's where the second element in disarray is helpful.

As I mentioned, this array always has exactly two elements.

First element is your current state snapshot.

Second element is a function that allows you to update your current state.

So this year, this strange looking thing, this dispatch thing here, that's a function that will always

be a function which you can call with a new data for your state to update that state.

So therefore, what we can do here, we can store this array with exactly two elements in a variable

or in a constant here, actually, because for this render cycle, it's not going to change.

Hence it can be a constant and all named as input state.

The name is totally up to you.

But in the end here we manage everything we need to manage for our well state for these two inputs here,

hence the name input state.

Now, did we store our array with the state snapshot and the state updating function here in input state,

we can connect it to our inputs and there I'll use a similar approach I showed you earlier in the course

with two way binding in the end, where we bind to value, often input to the current state snapshot

so that we pass the current state back into the input, so to say.

And I do this by simply referring to input state.

And then the first element, remember, input state is an array with exactly two elements and the first

element at Index zero will be a current state snapshot.

So that will be well, what we want to feed back into the input.

Now, of course, our state is an object, though not a string.

So for the title input here, I want to access input state zero DOT title because our state is an object

with a title and an amount property to manage while input for these two inputs and for the amount input

here all day of Forcett value equal to input state for the first element, which is our current state

snapshot amount.

Now we feed the current state for the respective inputs back into the input elements.

Of course, you all want to update the state when we type into these inputs, though.

And for that, just as we do, it always falls in Class-Based components.

We can listen to the on change event, which fires for every keystroke.

And there we get this event object, some hyrum executing an anonymous function.

In the end, we get the event object automatically and we want to update our state.

And as I mentioned, we do this with the second element in this array.

Use state gives us back.

So here we access the element index one, which is the second element.

And this is a function so we can execute it as a function by adding parentheses here.

Now, here I'm on the title input, so I want to update the title.

So what we do here is we simply pass a new object to input state to update our current state with this

new state object.

And there we can set the title property to event target value because event density change events.

The target is our input field and the value property then holds the value the user entered.

So let me reformat that and now repeat that same logic here for the amount and put down there.

So there we also add on change, but of course we update the amount field.

So with that, if we save this, that we go back to our program here and now enter Appel's five year.

Well, we see this generally works.

We can type here, which is a good sign, which means we're feeding the state correctly back into these

inputs and so on.

But we always get a warning that a component is changing a controlled input of type number to be uncontrolled.

So what's the reason for this warning?

What's wrong about the way we're saving our state here?

And why am I getting a warning about the input of type number, which is our second input if I type

into the first one?