All language subtitles for 024 Getting User Input & Handling Form Submission_en

Now to handle the form submission,

we got to do two main things,

we have to listen to the form submission.

And we then actually have to prevent the browser default,

which is that it sends an HTTP request automatically,

and hence it would reload the page.

We wanna prevent this and instead handle the submission

with JavaScript with react.

And in addition to that, we of course,

need to read the entered values,

we need to get the actual input the user entered.

Let's start with the form submission.

To listen for that submission,

we can add the on submit prop on the form,

because by default, a submit event will be emitted

if you have a button in a form and that button is clicked.

And we can then catch this submit event here

and run our own logic with help of that on submit prop.

Now I will add another nested function

in the new meetup forum component function,

let's say the submit handler, which should be triggered

when the submit event occurs by connecting function

and on submit like this.

But as I mentioned, a couple of seconds ago,

the default behavior of the browser would actually be

that it sends a request

to the server serving this page automatically.

And we don't want that we don't want that browser default.

Instead, we wanna prevent that default,

and run our own JavaScript logic.

That might and still involve

that we send that HTTP request later.

But we wanna send that request behind the scenes

without reloading the page,

which is what would happen

if the browser does its default thing.

Now, thankfully, preventing that browser default is simple.

We will get an event object automatically here.

Because all those built in events like on click, on submit

and all the other events to which we can listen,

for all those events,

react will automatically pass an event argument

into the function that is executed for those events.

This argument which we can accept here as a parameter,

and this event object will have a prevent default method,

which we can call to prevent the browser default.

That's actually not even react specific,

this event object and this method,

that is a Vanilla JavaScript,

which is fully supported by react.

So that will prevent that browser default,

and will allow us to fully handle the submission

with just JavaScript and react.

So that's step one.

Now we need to find a way of reading those entered values.

For reading the entered values,

we got two main ways of handling this,

we can use use state again,

and add the on change event listener to all those inputs,

which will in the end trigger a function

for every keystroke, and then we can extract that value,

the user entered from the event object

which will receive for that event,

and update our state for that given input

with the entered value.

That would allow us to keep track

of what the user entered with every keystroke.

But here I'm actually only interested in the user input once

when the form is submitted.

And for this,

we can use a number a concept built into react,

the concept of refs.

Now ref stands for reference.

And react simply allows us

to set up references cue DOM elements,

so we can get direct access to DOM elements.

To set up such a reference such a connection,

we first of all have to import the use ref hook from react.

So just like use state,

that's another built in special function offered by react

which we can execute in our functional components.

And we can execute use ref here.

And with that, we create a ref object, a reference object

and we can store this in a constant and we could name it,

title input ref, because my first ref here should be

for this title input.

Now to connect this created object to this input,

we add another special prop to this HTML element.

And now very special prop besides the key prop,

which is built into react

and supported on all elements out of the box,

and that's the ref prop.

We add the ref prop to this input

and as a value, we point at this title input ref,

this will establish a connection and will give us access

to this input element through this ref object.

So here in this submit handler,

we can then get the entered title.

So the concrete value the user entered

by using that title input ref.

And then they're actually dot current,

all those ref objects created with the use ref, were x such

that they have a current property,

which then holds the actual connected value.

And therefore it's not current,

which then holds this input element object,

the JavaScript representation of that input element.

And all those input elements have a value property.

That's just how JavaScript works.

The JavaScript object representing an input element

has a value property.

And that value property holds the currently entered value

of that input.

So that's how we can extract what the user entered.

We could also change it,

we could set value to some new value.

But we shouldn't really do that.

If you wanna change what's output on the screen,

use state for data and stat.

But for reading input, for reading values,

refs can be a very useful tool.

And here we are reading what the user entered.

Now, we can repeat that for the other inputs,

simply by creating more reps,

you can have more than one ref per component.

So here, I also create the image, input ref, like this,

and I'll already copy that a couple of times,

and also create the address input ref

and the description, input ref.

And then we connect those refs with the ref property.

Here on the image, we connect this to image input ref.

For the address, we connect us to address input ref.

And on the text area, which is there to enter a description,

we connect the description input ref.

Now with that, we can extract all

those entered values in the submit handler.

So we get the entered image with whips

with image input ref.current.value,

we got the entered address

with the address input ref.current.value.

And we got the entered description

by using the description input ref current.value.

And that then allows us to create a new object,

let's say, the meetup data object,

which then has a couple of keys, like let's say title,

and stores those entered values as values.

So the entered title for the title key, for the image key,

I store the entered image,

for the address key, let's say we store the entered address.

And for the description key,

we stored the entered description.

And now for the moment, I'll simply lock that meetup data

with console log, soon, we will send it to a server instead.

But for the moment, let's just see if that works.

And hence if I now go back

and open up the dev tools here and reload,

we can enter something here like test.

And then here's some URL.

Let me just grab that dummy image URL

from my dummy meetup data in the old meetups JS file,

and insert data here without quotes,

some test address 512345 test city

and then this is a test.

And if we now click add meetup,

we see this object here on the right,

which is the object with all the entered data.

So submitting the form and handling the submission,

preventing the browser default

and gathering all the user input.

All of that works now.

And that is how we can handle forms with react.

Now of course,

the goal is not to just lock the data here though.

Instead, we now want to send it

to a server which then stores it in a database.