Original subtitles

So let's now work on gathering user input.

And as I said, for a start

I wanna react to every change in any of the inputs.

So for example, on every keystroke,

and I simply wanna get the value the user entered

and store that somewhere.

And for example just log it to the console.

Now to do that, for a start

we need to add listeners to listen,

for every keystroke or for every change of these inputs.

And you'll learn that you can do that,

on the element where you wanna add a listener.

So for example, on this input here

by adding a prop that starts with "on"

and then the question just is

to which event you want to listen.

Now we could listen to on input

and therefore react to basically every keystroke,

but there also is the just the on change event

which basically does the same here.

It will also trigger on every keystroke,

but the advantage of the on change event

is that we can for example

use that same event for all inputs types.

For example, all the four Dropdowns.

So here I will add on change this event listener

to this input or this prop, to this input

and under the hood, this will then add

an event listener for the change event

to the input element which is rendered in the DOM.

And then we need to point at to code

at the function that should be executed

when that event occurs.

Now, you'll learn that we can define it in line here

with function or with an arrow function,

but that it's better to define it upfront.

And therefore that's what I'll do.

I'll add a new const and name it, title Change Handler.

To make it clear that this will be called

upon an event I end with handler,

and I'll name it, title Change Handler

because this function which I'll store here,

should be executed, whenever this, well title input changes.

So here for you on change prop,

I'll pass a pointer at this title change handler,

so this function here, as a value.

And again we don't execute it here,

we don't add parentheses, we just point at this function.

And this if I console log now,

will now execute whenever we

type in this type labeled field.

So if we go back and open the developer tools,

if I type here in the title,

you see title changed for every keystroke I do.

Now that's great, but typically

we wanna get the value the user entered.

And the question now is how can we get that value?

Which possibilities do we have here?

And the answer is quite trivial.

At least if you know Vanilla JavaScript.

So JavaScript without react.

If you would add an event listener,

to some element in Vanilla JavaScript like this,

then you would listen to let's say the click event

and in the function which you pass as a second argument,

which by the away is basically the function

you pass as a value to this prop.

There, you automatically get an event object

which describes the event which occurred.

That's a default JavaScript behavior,

you get in the browser when you listen to events.

And we get this default event object here as well.

Automatically, we don't need to do anything to get this.

Since we passed this function to react basically,

CRUD is on change prop, react we'll make sure

or actually even the browser itself will make sure

that we get such a event object

when this change event occurs.

Now we can lock this object to see what's inside it.

So I'll lock this event argument.

And if I now reload and I start typing,

I get to does object here.

And this object has a bunch of data.

The interesting thing for us is this target field here.

This target here simply points at the DOM element

for which the event occurred.

So in this case this input, and this input element in turn

has a long list of properties which we can read and set.

But most importantly for us, it also has a value property.

And this value property,

holds the current value of this input.

At the point of time this event occurs

and that's super useful

because that means that we can drill into this target.

And then this value I just showed you

to get the value which was currently entered

when that event occurred

for that element on which we're listening.

So now if I reload,

you'll see that I get the current value

with every keystroke and that's super useful.

Now we got this value.