All language subtitles for 061 Multiple Inputs.en_US

Beautiful job.

Now we know how we can use our controlled inputs with our list and next hour want to showcase how we

can have multiple inputs with the same on change handler.

Now, the use case that I'm trying to showcase is the one with many, many, many, many inputs on my

case.

I'm just going to add one more to our current setup.

But keep in mind that the whole idea is to show you what if you would have, I don't know, 10 inputs

and you don't want to have ten different state values and 10 different functions that you're calling

inside of the handler.

Now, first.

We would need to navigate to the address and we're looking for different files in this case, we're

looking for file number two online.

The multiple inputs is the name.

So service and what you'll notice that it is exactly the same, like we finished in the controlled inputs,

and that is by design.

So essentially, I'm not the biggest fan of refactoring, but this is exactly what we'll do in this

video where we will refactor it a little bit.

So our whole setup is going to be exactly the same, where we are still surveying the form, we're still

adding the items and all that good stuff is just the implementation will be a little bit different.

And I would want to start by adding one more input.

And again, when you're looking at this setup, the one that we're about to set up, please keep in

mind that we're talking about the form with multiple, multiple, multiple inputs, not just two or

three.

If you have two or three, probably there's nothing wrong with our previous setup.

So now what I would want is to copy and paste.

So we're adding one more item over here and I'll call this age.

So change this around.

We'll say that HTML four will be for age.

So also, of course, the idea will change.

We're going to add here age value as far as text, let's change the old age.

Now, we also would want to change the name, which, by the way, we haven't used it yet.

So on this video, you'll finally see why we're setting up that name attribute all the time.

And I would want to get a state value.

So for the time being, I will copy and paste.

I'll copy and paste and I'll say page and set a page, and by default, age will be, I don't know,

I think I'm going to go the same way with an empty string.

OK, that is going to be my age.

And of course, in here where I have the value and the change, I would want to change it to age online

chat age.

So this should work.

Correct.

But wouldn't it be better if we would have only one value in a state instead of three or four instead

of 10 or 15 or how many inputs you have?

And also, wouldn't it be better if we would have only one function that is responsible for on change,

regardless which input we're typing in?

Because our if we need to make some changes, we only need to do it in one place.

And we would do that by first setting up one state value.

So instead of first name email and the age, I will go with Consed and I'll call this person, so say

person.

And then of course there's also going to be a set person function.

Now it is going to be equal to a used state and now said this is equal to a object.

So I'm going to go with first name and then that it will be equal to a empty string, an email, same

spiel and the string also the age and you guessed it, empty string.

So one set that up these values now instead of using them one by one, the first name, email and the

age.

Now, I would want to reference the person.

And you're not by the way, I will delete that handle submit and we will rewrite it from the scratch.

So I just delete it so it's not in our way.

And eventually we'll set up one more time.

And of course, I have my person with all those three properties.

And now where we see the input, of course, we would also want to change where now the value will be

person, that person, not just the person who by the way, I think in here, I'm just going to comment

the south or you can delete it.

It's up to you.

So we have a person that first name, one person that email, and then eventually also we have a person

of that age.

Correct.

Now, the gotcha here is that we're still using these functions.

Correct.

So we have some e-mail.

We have said age and all that.

Now, there's a big fat complaint from react because of course, we don't have the handle submit and

also we don't have the functions.

So what I would want to do right now is just delete.

We will flip it over to the submit button.

And as far as the on change ledger, just a reference the function in this case instead.

So go with no and then change.

So that is, of course, the function we haven't created yet.

So I'm going to go with const and then handle change.

And again, I definitely would want that event object.

So I need to set up my parameter and I'll have access to the object.

And like I said.

We'll copy and paste, so changes around there's not going to be three separate functions, there's

going to be one function and again, think 15 inputs.

That is where it definitely makes way more sense.

So we have Hornchurch equal to handle change.

And then on the submit button, well, let's go with UNCLICK just so we can see that, of course, it

is going to work.

And in this case, I'll call this handle subelement, let's scroll up CONSED and then handle.

So right now, still the same setup.

We need to have access to the event object and will right away prevent and default.

OK, so that is the function that we're looking for now.

At this point it's complaining the channel change is not defined.

So of course I call this HANEL and that's not what the function name is.

So let's say now we don't have the arrows.

Beautiful.

Now everything works.

But if you start to try typing.

Of course, again, nothing will work well because the handl change is not doing anything.

Now, why am I showing you this particular setup?

Well, because now I would want to run the channel change regardless of the input, and I would want

to get those values.

And depending on which input I'm changing, I also would want to affect the person.

Now, two properties that I definitely want from the event object are the name and the value.

So if I go here with consed name and equal to event, target and name, copy and paste and if we go

here with a value.

And just around again to even target, so that is the input where we're typing the same how we access

value in my previous case, remember, in the controlled inputs.

We use the value correct when we are setting up the first name or email, we use event target, so that

acts as the input and then we use dot value property.

In this case, I'm looking for two things.

I'm saying whenever I call my handle change, I would want to check for the name of the target and the

name will be right here.

Remember, each and every time we set up that name attribute on the input.

Well, now we'll use it now, say a real target name and then divide.

So if your a log, you'll notice something pretty, pretty cool where we go with name and value and

depending on which input I'm typing n this tells me that the name attribute on the input is first name

and then I'm also getting the values.

Now nothing is displayed right now in the input because we haven't updated the person yet, meaning

we're accessing of course the person that first night and we're not doing anything with that person

yet.

But don't worry, we'll do that in a second.

But if we change to an email, beautiful.

Now n again, it gets me the name of the input and it also gets me that current value.

And the same, of course, is going to be with an H.

Now why is that so cool?

Well, because now once I know the name and the value, I can use the dynamic object properties.

Again, this is coming from JavaScript.

So please either utilize my JavaScript Nugget series or just Google Dynamic Properties, how you would

set them up in Joska.

So now I have the object.

Correct.

And of course the object is that person.

So what I could do here is I could say set person and then remember, I need to copy the old values

first, because since it is an object, it has multiple properties as I'm updating one, for example

name.

I don't want to remove or delete the email.

And that's why we first start by superduper.

That we copy the person from the state and then we add a comma and then after the comma, we would want

to come up with whichever property we would want to update.

Now, of course, that is going to depend on which input we're typing in.

Correct.

And this is the case where we can do this dynamically, where I can say, you know what, get me the

name on that object, because in here I'll pass in the value.

Now, what were my values?

It was either first name, it was either email or it was age.

So now we'll dynamically update this property equal to whatever value we have.

Please keep in mind it's the same thing as you write over here, first name and then it is equal to

a value.

Now the difference is that we are doing this dynamically because we have three inputs.

So if I'll just leave this as a first name, you'll notice that each and every time I type something,

it's actually displayed over here, which kind of doesn't make sense, right?

Why?

Well, because I'm not selling this dynamically.

I'm saying first name where if I have access to the name and of course, those names need to match to

whatever I have in the object now, each and every time I'll type in any of the inputs, I'll dynamically

update that state value as well.

So that's why I need to go with that name.

And that's why we added the name right from the get go.

Now, you're not going to use that all the time, but there's going to be some use cases where it is

very nifty to update whichever state value references the input.

So now, again, let's not get to a bigger screen notice.

I have my state now check it out where I have the name.

I'll start typing and there it is in my state, in the person right away.

I'll access the first name and of course, that it will be equal to Ajan.

Now if I go with email, I go with John at G.M. dot com and there it is.

Now we have John and G.M. outcome.

And lastly, we have age of twenty four.

So notice how nicely we updated all the hours and now what's left to do.

Is again, to submit the form so we prevent a default and now I would want to check if and in this case

I'm checking for three things.

So first name and person, then dot email.

And then the last property, of course, was age.

So I only would want to submit this form if all three of them.

Are more than just an empty string and then let's do the same thing where we are creating a new person,

correct?

So we go here with that new person.

And then as far as the value, I would want to copy the person value from the state of this one, since

this is what we're setting up as far as the input.

And now I also would want to add that ID someone to go with it is equal to a new date and then get time,

get time invoked and then we have to string invoked as well.

And lastly, let's just add person to a set of people and then let's that a person back to an empty

string.

So we go with set people.

That is my array of course.

And like I said previously, we used the function in this case.

I'm just going to pass an era where I'll copy the values from the state and then I'll add that new person.

So we were just practicing in the previous example where we used a function.

We can also pass directly here the value.

And then, like I said, I also want to set person back to empty values.

So we passed in the object.

We say first name is equal to an empty string, then email is empty string and then the age is empty

string.

Now want to set out on a bigger screen where we go with Susan than we're looking for Susan at Gmail

dot com and on the edge will be twenty five.

The moment we have the person there is, there is our Susan.

Now if you want of course you can add also in the just sex that particular age, if that's what you're

shooting for, because we're going to go here with age and in the first name instead of the first name,

we're going to go with paragraph and let's just say age like.

So, um, let's try it out one more time with honor and at Gemelli.

Come on, she's going to be twenty six.

And of course, the moment we add the item, there is this displayed and our list.

So that essentially is how we can set up multiple values with the same handle change function.

Now again, are you going to use that all the time.

No, but there's going to be some use cases where it's just going to be much faster and easier instead

of setting up all these multiple state values and the separate functions that update each and every

time you type in the input.

In this case, we have the same function.

So even if I would have twenty input, if I want to change something around, I just need to do that

in one place.