All language subtitles for 060 Add Item to the List.en_US

Excellent work.

Now we understand how we can set up controlled inputs and react and just to complete this particular

part of the forms.

I would also want to create a little app where we can add that person to our list, because up until

this time, all the time we work with lists.

We were just getting some kind of data whether or not it was external data coming from the API or it

was ours.

However, in this case, we'll take a look at how we can add of those items dynamically to the list,

since now we have covered forms and I can grab my inputs.

Now, I'll start simply by creating my state value for my list of people.

So I'm going to go with people online that people over here that as you state and we already know that

we need to start with an empty array, right?

Not bad.

Not bad.

Now, what is the next step?

Well, once I submit the form, I can see that I can grab these values.

So wouldn't it makes sense that once we submit the form, I would want to add that new person that I'm

creating to my people?

All right.

I think that would make sense.

Now, before we do anything, let's think about it.

Do we want to have the functionality where once we click, we can also submit the form and notice how,

as I'm clicking on adding the person I have to empty.

Now, why do I have to empty?

Well, because first name and email are both empty strings.

Right.

But nothing prevents me right now from consulting.

So essentially, if I would want to set up some kind of functionality where I'm adding this to a people

right.

I can definitely do that.

So that's why right away set up the condition where.

I'm only going to submit the form, meaning I'm only going to add my item to the array if both of the

values are true, because we already know that empty string is positive value.

So, of course, that condition will fail if both of them or one of them essentially is a empty string.

So in this case, I'll say first name and I'll use an operator and email and what you'll notice that

only then I can submit the form, submit the form reform and line in here.

Let me write empty values.

So that is not the case.

Of course the values will be empty.

So I'll set up the LS and let's say empty markers.

And you know what?

I think I will leave this for your reference so we'll have the else.

There's going to be no model, no info to the user, but at least we all know that if we see a council

empty values, that just means that the user is trying to submit with empty values.

Now, if both of them have some kind of value, what I would want and I guess I'm going to start by

creating a new object.

So I'm going to go here with const and then person and I'll start with first name and email.

So it's really cool in Essex if the property.

Value matches the variable that you're assigning to then you can skip one step where essentially if

I'm creating a new person, I could say something like this first name is equal to a first name and

then email is equal to an email.

And now if I add the value, let me just lock the person first.

But if I say here.

By the way, let me save it here now, not here.

Sorry, I confused a little bit.

I would want to save my file first and then let's try it again, John.

And we're going to go, John, at a Gmail dot com.

So once we add the person, notice how in a console I did create this person.

I have the object and everything works.

Beautiful.

Now, the thing is that I can shorten this a little bit because in the ESX we have a shorthand where

if the key name matches the variable that holds the value.

I can just write something like this where email is email and first name is first name.

Please keep in mind both of them essentially have the same value is just a little short syntax, which

I'm going to use throughout the editorial as well as the course.

So if we go here with John at Gmail dot com, you'll notice that new person.

Yeah, we still have the value.

So everything works correctly.

Now, next, I would want to add this new person to my right.

Correct.

How do we do that?

Well, we go with set people and just so we can keep on practicing on the function set up as well.

Remember, that was my old people or current people or whatever.

So I will call this same thing.

People just remember that we're talking about the current value in the state.

And then what I would want to return from this function is dot, dot, dot.

So whatever we have as far as the values in the array, so we're using the spread operator and then

of course I'm returning Anura.

However, I would want to add that person object as well.

Again, I know I said this 20 thousand times, but we also have an option of just passing this directly

in people.

The reason why I set this up as a function is I would want you to practice on setting up the function

as well.

If you see that in someone else's code, you're not confused of what is happening.

And of course, what I would want is also set both of these the first name and the email back to an

empty string, correct?

That would make sense.

So let's go with set first name, and that is going to be equal to empty string.

And I'll have also a set email the same way.

So now once we click and by the way, if you want, we can cancel log at somewhere, the people or not.

Let's use the reactive.

Sorry.

Let's go here to a bigger screen.

Now I have this value over here, the empty.

All right.

And now if I'll go again with maybe Peter.

And if I set the email, Peter, at GM, I'll not come check it out once we add the person.

Now we clear this one with clearly first and second of all in my state, email and name, respectively,

and then in the state.

Check it out.

Now I have email on the first name for Peter.

So now I can keep on adding more and more people now before we add more people.

Why don't we also set up here a return where we display what people we have in our.

So again, we'll iterate over the state value than each and every item will be an object.

So all nameless in my Perama as a person.

And as far as the return, our return, a deer over here and I'll go with Consed and then I'd be on

first name, first name and email.

So essentially what I'm doing is I'm the structuring.

Now you're probably wondering about this idea.

Well, don't worry, we all create that idea in a second because remember, for the last.

We needed to use something unique, so even though technically I could do something like this index

and I'll set it equal to index, the problems will start once we start removing the items.

Now, I'm not going to do that in this particular example, but in general, you don't want to use index

once you start adding and removing items that or even though you are technical in this example, we

might let it slide and then use the index.

I'm not going to do that.

I'll show you how we can quickly set up the unique key as far as when we're creating the person.

So for now, let's just go with d'Hiv and notice how we structure the first time an email from the person,

because we already know that, of course, it is there because we are creating that particular object.

And that in here, what I would want is to have the for on our show the first time, searching for the

first time, and I'll also add a class name of item just so we have a little bit of styling.

And then let's have the paragraph with a e mail slate value.

So now every time we add something in our form, that person should be displayed.

Now React will complain because we don't have that unique value in the key.

And we will stand up in a second.

So let's go with Anna.

I'm going to be Anna at Gmail dot com.

And yeah, we do have the honor and everything is displayed correctly.

Again, the problem right now is that unique Kiprop and this is not the most vigorous setup, but we'll

cheat a little bit where I'm going to use the new date, get time to string.

Normally you would use some kind of package.

You ID is one of the most popular ones where it's a package, you install it you imported just like

we did with, for example, react, and then you set up that unique.

Again, in my case, I'm just going to cheat a little bit where I'll use a nifty set up of ID.

So now I notice how I'm creating this new person.

I also this key off our ID and that is going to be equal to a new date and then we're going to go and

get time to strike.

We invoke it and now you'll notice that each and every time you create that person, there's going to

be that unique I.D. So you fall console lock the person in this case.

And we're going to go with Susan, for example, Susan and Susan at Gmail dot com, check it out.

And once we have the person there it is now, of course, we have the idea.

And the last thing, of course, is where we are rendering the list of people now would want to also

get that idea.

Now, I already structured out of my person, so and I remember we needed to use the Kiprop.

And set it equal to the idee, and once we do that, we shouldn't have no issues whatsoever, we can

type whatever names we would want and we can clearly see how they're also affected in our state.

So we go here with Gmail dot com.

And then, of course, once we have the person, there is my person in the West.

And I can clearly also see that in a state and I shouldn't have no errors in the council because I am

using those unique keys.

So that's how we can combine our controlled input with our list.

So each and every time we add some kind of item in the form, we can just submit the form.

If the values are more than empty strength.

And of course we trigger this functionality where again, we have some kind of state value for the list

and we just add a new item to the list, clear the items.

So send them back to an empty string.

And down at the bottom, we just iterate over the list of items, grab all the properties that we want

and nicely displaying them on the screen.