All language subtitles for 014 Adding Two-Way Binding_en

Instructor: How can we clear those inputs?

Well, that's part of the reason why I wanted

to use state for storing the entered values.

We could've also used the global variables

outside of the component function.

Otherwise, if we just wanted to persist the values,

but by using state, we have an advantage.

We can now implement something

which is called two-way binding, which simply means

which is called two-way binding, which simply means

that for inputs we don't just listen to changes,

but we can also pass a new value back into the input.

So that we can reset or change the input programmatically.

And how do we do that? Well, it's very simple.

All we have to do is add the value attribute,

which is a default attribute, to this input element.

This will set the internal value property,

which every input element has.

And we can set it to a new value.

And here, I will bind this to enteredTitle.

So now it is this two-way binding

So now it is this two-way binding

because now we don't just listen to changes

in the input to update our state.

But we also feed the state back into the input

so that when we change the state, we also change input.

This might sound like an infinite loop,

but it actually isn't.

So we won't have a problem there.

But the advantage is that when the form is submitted

for example, we can call setEnteredTitle.

for example, we can call setEnteredTitle.

And set this back to an empty string,

which also was our initial state.

And by doing that, we override what the user entered

after the form was submitted

and therefore cleared the input.

and therefore cleared the input.

And we can do this for all inputs.

We can set the entered amount to an empty string,

and set the entered date to an empty string,

and then just add to the value prop to all these inputs.

and then just add to the value prop to all these inputs.

So here I add value and point at enteredAmount

to pass that back into the amount input.

And do the same here for the date,

And do the same here for the date,

pass the entered date back into the input.

If we now save that and I reload, this is looking good.

Now, we can still enter something here as it seems,

but if I click Add Expense,

you'll see it's all cleared again.

And we still have our data collected

and stored here in this object.

So this is a neat behavior, but more importantly,

this is also another key concept in React.

this is also another key concept in React.

Two-way binding is very useful

when you're working with forms

because it allows you to gather user input,

but then also change it.

For example, upon form of mission.