All language subtitles for 058 Form Basics.en_US

Excellent.

And up next in the story, we have the forms.

More specifically, we're going to cover controlled inputs, what they are and how they work and also

how we can set up multiple inputs with just one function.

And before we cover any of those topics, though, I would just want to give you general info about

the how these forms work and react.

So we'll start working in controlled inputs, but we'll cover them in a NextRadio in the beginning.

I would just want to give you the general overview on the file, of course, that we're looking for

years ago.

Again, I'll call the set up just so I don't have to change stuff around in here and say tutorial.

Then we're looking for the folder number for forms, one set up.

And of course, we're looking for controlled inputs.

And now instead of deciding to, I'll render my setup Nerdist.

And if you work with forms in jouster.

You know, that it worked something along the lines of setting up some kind of idea or class or whatever

on the input van, you targeted the input.

And then in order to get the value, you are looking for the value of property on the node.

Now, in Iraq, it's a little bit different where you have those controlled and uncontrolled inputs.

By the way, we'll talk about uncontrolled inputs when we talk about use RF.

But whenever we deal with controlled inputs, you you'll be hooking up your input to a state value.

And since it's going to be easier for me to show, of course, let's just put this one on.

I just remember that the setup is going to be a bit different than a regular JavaScript.

So what I would want to do first.

Well, I think we could change our just a little bit where we'll start with article, by the way, there's

going to be two articles.

One is going to be displaying the items and the second one will be dealing with four.

So let's just start with the form and the next video will add those items as well.

And when it comes to a form, we're not going to deal with action.

So we'll deal with that on our end.

Now, I do want to add here a class and I'm just for styling purposes, and that is going to be a form

an inside of the form.

Set up, I think, to input's is going to be geared.

So we'll go with form control again.

This is just for styling.

Please keep that in mind.

And once I shave, I should have the form on the screen.

Beautiful homeland within this form control again.

This is just for styling.

Please keep that in mind.

It has nothing to do with the react within this div.

Now I would want to set up my input, but I also want to set up a label because I would want to showcase

how we can connect label with input and react.

And as far as the react, because the naming conventions and joysticks are calling for Kamakshi, you'll

see the syntax where.

In regular schedule, of course, you wouldn't write that like this, but in react, if you have a label

and you want to connect it to the input that we're about to set up, you need to use this HMO for written

in chemicals.

And here you need to pass in of the ID that is eventually going to be on the input.

So in my case, it's going to be first name.

That's I'm it right here and all right here, name, line, colon like so.

And of course, we would need to set up our input.

So I'm going to go with input now, type the same works as with regular HMO.

So we have multiple types.

In this case, I'm going to go with my basic one, which is going to be a text.

And of course, I would need to have two things.

I would need to have the idea as well as the name.

So we're going to go here with an ID and also the sequel to a first name, just like I had in the label.

And then let's also set up the name.

So say your name.

And that is equal to a first online name.

So Sayeret Emeritus.

And of course I have my label.

Not once I click on a label, I write away, highlight my input and of course I have the input.

And since I would want to have two of them, I'll copy and paste.

And we just need to change some values around where one control stays exactly the same.

Now it is going to be a bit different.

So let me select both of them.

And we're looking for email and also the name will change.

So let's right over here email.

And by the way, in here, I also would need to change it to email.

And once I have my second input, I also would want to set up right away a button.

So I'm going to go here with Button, then type will be met on.

And here let's just write and person and you'll see why we do that in NextRadio.

So we have our button on some.

And then when it comes to react, we have two options.

Either we can add on, submit on the form so the form element or we can still add on.

Click on this button and I'll show you in a second.

Both of them will work.

But let's start with EntreMed because that is something we haven't covered.

So on the form we can set up on Subnet Lessner and then of course we'll still need our handle and then

met like so.

And of course we would want to come up with that function online handle so met.

Now eventually there's going to be an event object and I'll show you why.

And second, for time being, let's just go with our world and let's see what is happening.

So I type my values, both of them like Shell.

And now once I press the button or I press return, I should I should see how the world and the console,

how it's not happening.

Why?

Well, because by default, browser will try to submit the form and then refresh the page.

That's why we don't see this whole world.

And just like in JavaScript, we have access to the event object.

And on that event object, we have a method called prevent default.

We're essentially we're saying, you know what, prevent the default behavior.

We will deal with this form data on our own.

And so the way would prevent the default would be falling way where we go would prevent default.

Now, of course, once we fill it out, either we can press enter or we can press on the button and

of course, will be able to see the whole world.

So essentially now we're not a refreshing the page the moment we submit the form.

Awesome.

And just to showcase that, it will still work if we set this up on the button with a type of event.

Let's go here with on Click.

And it's the same deal when we pass and I submit now remove it for a second, even though we'll push

it back.

And here again, let's try it out and check it out.

It will still work.

So again, that is the case where you have multiple options of how you would want to submit the form

in direct.

Either you use this on submit, but make sure you press the button form or you can still use the good

old one click.

Make sure that the button is type submit and then of course, make sure that you in both scenarios as

a parameter in this function you are.

Accessing the event object and then however you want to call this spammer and my I call this E online,

you can look for the properties that are available on that event object.

So our move this on click.

So that would be a basic setup when it comes to forms in react.