1
00:00:00,210 --> 00:00:01,060
Excellent work.

2
00:00:01,080 --> 00:00:09,690
Now we understand how we can set up controlled inputs and react and just to complete this particular

3
00:00:09,690 --> 00:00:10,860
part of the forms.

4
00:00:11,310 --> 00:00:20,430
I would also want to create a little app where we can add that person to our list, because up until

5
00:00:20,430 --> 00:00:23,430
this time, all the time we work with lists.

6
00:00:23,670 --> 00:00:29,940
We were just getting some kind of data whether or not it was external data coming from the API or it

7
00:00:29,940 --> 00:00:30,640
was ours.

8
00:00:30,930 --> 00:00:37,050
However, in this case, we'll take a look at how we can add of those items dynamically to the list,

9
00:00:37,200 --> 00:00:41,630
since now we have covered forms and I can grab my inputs.

10
00:00:41,940 --> 00:00:48,470
Now, I'll start simply by creating my state value for my list of people.

11
00:00:48,780 --> 00:00:54,920
So I'm going to go with people online that people over here that as you state and we already know that

12
00:00:54,930 --> 00:00:58,410
we need to start with an empty array, right?

13
00:00:58,780 --> 00:00:59,610
Not bad.

14
00:00:59,610 --> 00:01:00,210
Not bad.

15
00:01:00,510 --> 00:01:02,440
Now, what is the next step?

16
00:01:02,460 --> 00:01:07,680
Well, once I submit the form, I can see that I can grab these values.

17
00:01:07,980 --> 00:01:15,780
So wouldn't it makes sense that once we submit the form, I would want to add that new person that I'm

18
00:01:15,780 --> 00:01:18,540
creating to my people?

19
00:01:18,690 --> 00:01:19,110
All right.

20
00:01:19,620 --> 00:01:20,830
I think that would make sense.

21
00:01:21,190 --> 00:01:24,120
Now, before we do anything, let's think about it.

22
00:01:24,160 --> 00:01:30,720
Do we want to have the functionality where once we click, we can also submit the form and notice how,

23
00:01:30,720 --> 00:01:33,330
as I'm clicking on adding the person I have to empty.

24
00:01:33,900 --> 00:01:35,160
Now, why do I have to empty?

25
00:01:35,850 --> 00:01:39,540
Well, because first name and email are both empty strings.

26
00:01:39,540 --> 00:01:39,870
Right.

27
00:01:40,260 --> 00:01:43,880
But nothing prevents me right now from consulting.

28
00:01:44,550 --> 00:01:49,860
So essentially, if I would want to set up some kind of functionality where I'm adding this to a people

29
00:01:49,870 --> 00:01:50,130
right.

30
00:01:50,460 --> 00:01:51,730
I can definitely do that.

31
00:01:52,080 --> 00:01:55,170
So that's why right away set up the condition where.

32
00:01:56,030 --> 00:02:05,180
I'm only going to submit the form, meaning I'm only going to add my item to the array if both of the

33
00:02:05,180 --> 00:02:09,410
values are true, because we already know that empty string is positive value.

34
00:02:09,650 --> 00:02:16,820
So, of course, that condition will fail if both of them or one of them essentially is a empty string.

35
00:02:16,850 --> 00:02:23,870
So in this case, I'll say first name and I'll use an operator and email and what you'll notice that

36
00:02:23,870 --> 00:02:30,460
only then I can submit the form, submit the form reform and line in here.

37
00:02:30,470 --> 00:02:31,870
Let me write empty values.

38
00:02:32,300 --> 00:02:33,340
So that is not the case.

39
00:02:33,350 --> 00:02:36,320
Of course the values will be empty.

40
00:02:36,770 --> 00:02:41,520
So I'll set up the LS and let's say empty markers.

41
00:02:41,540 --> 00:02:42,130
And you know what?

42
00:02:42,140 --> 00:02:46,130
I think I will leave this for your reference so we'll have the else.

43
00:02:46,130 --> 00:02:54,110
There's going to be no model, no info to the user, but at least we all know that if we see a council

44
00:02:54,110 --> 00:03:00,390
empty values, that just means that the user is trying to submit with empty values.

45
00:03:00,770 --> 00:03:08,300
Now, if both of them have some kind of value, what I would want and I guess I'm going to start by

46
00:03:08,300 --> 00:03:11,080
creating a new object.

47
00:03:11,420 --> 00:03:18,340
So I'm going to go here with const and then person and I'll start with first name and email.

48
00:03:18,740 --> 00:03:23,420
So it's really cool in Essex if the property.

49
00:03:24,370 --> 00:03:32,530
Value matches the variable that you're assigning to then you can skip one step where essentially if

50
00:03:32,530 --> 00:03:38,470
I'm creating a new person, I could say something like this first name is equal to a first name and

51
00:03:38,470 --> 00:03:41,700
then email is equal to an email.

52
00:03:42,040 --> 00:03:47,020
And now if I add the value, let me just lock the person first.

53
00:03:47,350 --> 00:03:48,850
But if I say here.

54
00:03:49,870 --> 00:03:53,200
By the way, let me save it here now, not here.

55
00:03:53,290 --> 00:03:55,750
Sorry, I confused a little bit.

56
00:03:55,780 --> 00:03:59,770
I would want to save my file first and then let's try it again, John.

57
00:04:00,470 --> 00:04:04,140
And we're going to go, John, at a Gmail dot com.

58
00:04:04,570 --> 00:04:09,970
So once we add the person, notice how in a console I did create this person.

59
00:04:10,360 --> 00:04:13,390
I have the object and everything works.

60
00:04:13,390 --> 00:04:13,970
Beautiful.

61
00:04:14,410 --> 00:04:22,180
Now, the thing is that I can shorten this a little bit because in the ESX we have a shorthand where

62
00:04:22,270 --> 00:04:28,480
if the key name matches the variable that holds the value.

63
00:04:28,780 --> 00:04:34,540
I can just write something like this where email is email and first name is first name.

64
00:04:34,870 --> 00:04:43,090
Please keep in mind both of them essentially have the same value is just a little short syntax, which

65
00:04:43,090 --> 00:04:46,790
I'm going to use throughout the editorial as well as the course.

66
00:04:46,930 --> 00:04:52,350
So if we go here with John at Gmail dot com, you'll notice that new person.

67
00:04:52,360 --> 00:04:54,110
Yeah, we still have the value.

68
00:04:54,490 --> 00:04:56,830
So everything works correctly.

69
00:04:57,310 --> 00:05:01,880
Now, next, I would want to add this new person to my right.

70
00:05:02,350 --> 00:05:02,800
Correct.

71
00:05:03,220 --> 00:05:04,160
How do we do that?

72
00:05:04,690 --> 00:05:13,360
Well, we go with set people and just so we can keep on practicing on the function set up as well.

73
00:05:13,720 --> 00:05:18,340
Remember, that was my old people or current people or whatever.

74
00:05:18,740 --> 00:05:21,750
So I will call this same thing.

75
00:05:22,020 --> 00:05:27,880
People just remember that we're talking about the current value in the state.

76
00:05:28,420 --> 00:05:33,220
And then what I would want to return from this function is dot, dot, dot.

77
00:05:33,580 --> 00:05:40,030
So whatever we have as far as the values in the array, so we're using the spread operator and then

78
00:05:40,030 --> 00:05:41,700
of course I'm returning Anura.

79
00:05:41,920 --> 00:05:45,950
However, I would want to add that person object as well.

80
00:05:46,480 --> 00:05:53,080
Again, I know I said this 20 thousand times, but we also have an option of just passing this directly

81
00:05:53,080 --> 00:05:53,910
in people.

82
00:05:54,250 --> 00:06:00,460
The reason why I set this up as a function is I would want you to practice on setting up the function

83
00:06:00,460 --> 00:06:01,010
as well.

84
00:06:01,030 --> 00:06:06,160
If you see that in someone else's code, you're not confused of what is happening.

85
00:06:06,580 --> 00:06:14,230
And of course, what I would want is also set both of these the first name and the email back to an

86
00:06:14,230 --> 00:06:15,550
empty string, correct?

87
00:06:15,590 --> 00:06:16,520
That would make sense.

88
00:06:16,930 --> 00:06:22,390
So let's go with set first name, and that is going to be equal to empty string.

89
00:06:22,780 --> 00:06:27,470
And I'll have also a set email the same way.

90
00:06:27,910 --> 00:06:35,320
So now once we click and by the way, if you want, we can cancel log at somewhere, the people or not.

91
00:06:35,560 --> 00:06:36,870
Let's use the reactive.

92
00:06:37,070 --> 00:06:37,450
Sorry.

93
00:06:37,840 --> 00:06:39,830
Let's go here to a bigger screen.

94
00:06:40,090 --> 00:06:43,720
Now I have this value over here, the empty.

95
00:06:44,140 --> 00:06:44,600
All right.

96
00:06:45,010 --> 00:06:47,650
And now if I'll go again with maybe Peter.

97
00:06:48,510 --> 00:06:56,310
And if I set the email, Peter, at GM, I'll not come check it out once we add the person.

98
00:06:56,760 --> 00:07:04,830
Now we clear this one with clearly first and second of all in my state, email and name, respectively,

99
00:07:05,110 --> 00:07:06,480
and then in the state.

100
00:07:06,720 --> 00:07:07,240
Check it out.

101
00:07:07,620 --> 00:07:10,800
Now I have email on the first name for Peter.

102
00:07:11,130 --> 00:07:16,810
So now I can keep on adding more and more people now before we add more people.

103
00:07:16,860 --> 00:07:23,050
Why don't we also set up here a return where we display what people we have in our.

104
00:07:23,820 --> 00:07:29,910
So again, we'll iterate over the state value than each and every item will be an object.

105
00:07:30,270 --> 00:07:33,570
So all nameless in my Perama as a person.

106
00:07:34,020 --> 00:07:44,630
And as far as the return, our return, a deer over here and I'll go with Consed and then I'd be on

107
00:07:44,850 --> 00:07:49,170
first name, first name and email.

108
00:07:49,560 --> 00:07:52,760
So essentially what I'm doing is I'm the structuring.

109
00:07:53,050 --> 00:07:55,120
Now you're probably wondering about this idea.

110
00:07:55,470 --> 00:08:00,180
Well, don't worry, we all create that idea in a second because remember, for the last.

111
00:08:01,300 --> 00:08:07,870
We needed to use something unique, so even though technically I could do something like this index

112
00:08:08,290 --> 00:08:14,680
and I'll set it equal to index, the problems will start once we start removing the items.

113
00:08:14,960 --> 00:08:20,470
Now, I'm not going to do that in this particular example, but in general, you don't want to use index

114
00:08:20,500 --> 00:08:26,830
once you start adding and removing items that or even though you are technical in this example, we

115
00:08:26,830 --> 00:08:29,940
might let it slide and then use the index.

116
00:08:30,190 --> 00:08:31,170
I'm not going to do that.

117
00:08:31,180 --> 00:08:37,940
I'll show you how we can quickly set up the unique key as far as when we're creating the person.

118
00:08:38,140 --> 00:08:44,470
So for now, let's just go with d'Hiv and notice how we structure the first time an email from the person,

119
00:08:44,770 --> 00:08:49,780
because we already know that, of course, it is there because we are creating that particular object.

120
00:08:51,000 --> 00:09:00,640
And that in here, what I would want is to have the for on our show the first time, searching for the

121
00:09:00,990 --> 00:09:07,550
first time, and I'll also add a class name of item just so we have a little bit of styling.

122
00:09:07,980 --> 00:09:12,930
And then let's have the paragraph with a e mail slate value.

123
00:09:13,440 --> 00:09:19,300
So now every time we add something in our form, that person should be displayed.

124
00:09:19,620 --> 00:09:24,390
Now React will complain because we don't have that unique value in the key.

125
00:09:24,870 --> 00:09:27,120
And we will stand up in a second.

126
00:09:27,480 --> 00:09:28,640
So let's go with Anna.

127
00:09:28,990 --> 00:09:33,300
I'm going to be Anna at Gmail dot com.

128
00:09:33,780 --> 00:09:38,140
And yeah, we do have the honor and everything is displayed correctly.

129
00:09:38,220 --> 00:09:48,240
Again, the problem right now is that unique Kiprop and this is not the most vigorous setup, but we'll

130
00:09:48,240 --> 00:09:53,400
cheat a little bit where I'm going to use the new date, get time to string.

131
00:09:53,670 --> 00:09:56,190
Normally you would use some kind of package.

132
00:09:57,440 --> 00:10:05,090
You ID is one of the most popular ones where it's a package, you install it you imported just like

133
00:10:05,090 --> 00:10:09,950
we did with, for example, react, and then you set up that unique.

134
00:10:10,220 --> 00:10:15,170
Again, in my case, I'm just going to cheat a little bit where I'll use a nifty set up of ID.

135
00:10:15,440 --> 00:10:18,080
So now I notice how I'm creating this new person.

136
00:10:18,320 --> 00:10:25,760
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

137
00:10:25,760 --> 00:10:27,860
get time to strike.

138
00:10:28,040 --> 00:10:33,620
We invoke it and now you'll notice that each and every time you create that person, there's going to

139
00:10:33,620 --> 00:10:39,560
be that unique I.D. So you fall console lock the person in this case.

140
00:10:39,560 --> 00:10:47,750
And we're going to go with Susan, for example, Susan and Susan at Gmail dot com, check it out.

141
00:10:48,200 --> 00:10:52,250
And once we have the person there it is now, of course, we have the idea.

142
00:10:52,610 --> 00:11:00,380
And the last thing, of course, is where we are rendering the list of people now would want to also

143
00:11:00,380 --> 00:11:01,330
get that idea.

144
00:11:01,400 --> 00:11:07,130
Now, I already structured out of my person, so and I remember we needed to use the Kiprop.

145
00:11:08,320 --> 00:11:15,430
And set it equal to the idee, and once we do that, we shouldn't have no issues whatsoever, we can

146
00:11:15,430 --> 00:11:22,630
type whatever names we would want and we can clearly see how they're also affected in our state.

147
00:11:23,080 --> 00:11:25,810
So we go here with Gmail dot com.

148
00:11:26,590 --> 00:11:32,050
And then, of course, once we have the person, there is my person in the West.

149
00:11:32,290 --> 00:11:38,590
And I can clearly also see that in a state and I shouldn't have no errors in the council because I am

150
00:11:38,830 --> 00:11:41,580
using those unique keys.

151
00:11:41,950 --> 00:11:47,500
So that's how we can combine our controlled input with our list.

152
00:11:47,920 --> 00:11:54,610
So each and every time we add some kind of item in the form, we can just submit the form.

153
00:11:54,610 --> 00:11:58,990
If the values are more than empty strength.

154
00:11:59,350 --> 00:12:05,080
And of course we trigger this functionality where again, we have some kind of state value for the list

155
00:12:05,350 --> 00:12:09,360
and we just add a new item to the list, clear the items.

156
00:12:09,460 --> 00:12:11,620
So send them back to an empty string.

157
00:12:11,860 --> 00:12:19,800
And down at the bottom, we just iterate over the list of items, grab all the properties that we want

158
00:12:20,020 --> 00:12:23,380
and nicely displaying them on the screen.