1
00:00:02,170 --> 00:00:09,830
In the last lecture, we started out putting a list by mapping an array into an array with jsx elements

2
00:00:09,910 --> 00:00:13,230
and this is the common pattern of outputting lists in react.

3
00:00:13,420 --> 00:00:17,760
You just use javascript because hey, everything is javascript,

4
00:00:17,770 --> 00:00:20,250
I can't say it enough. Now

5
00:00:20,410 --> 00:00:22,980
we still got some things to improve,

6
00:00:22,990 --> 00:00:25,630
for example, this key warning we're getting.

7
00:00:25,700 --> 00:00:27,400
I'll come back to that soon,

8
00:00:27,550 --> 00:00:32,900
however before I do that, let's see how we can actually manipulate this array,

9
00:00:33,370 --> 00:00:37,050
and for that let me add a new click listener.

10
00:00:37,330 --> 00:00:44,140
Inside our person components here, we actually already have a click listener on the first paragraph and

11
00:00:44,140 --> 00:00:49,150
there we execute this click prop. Prior to our change there,

12
00:00:49,150 --> 00:00:52,700
we then called the switchNameHandler.

13
00:00:53,020 --> 00:00:55,090
Now I will remove this method,

14
00:00:55,180 --> 00:00:58,320
I'm not calling it anymore from anywhere in my application,

15
00:00:58,540 --> 00:01:01,080
instead I want to add a new handler,

16
00:01:01,190 --> 00:01:03,930
I'll name it deletePersonHandler

17
00:01:03,940 --> 00:01:08,450
and you might be able to guess what this will do. Here,

18
00:01:08,530 --> 00:01:15,040
I want to delete a person from my array of persons and I want to execute this when I click this first

19
00:01:15,040 --> 00:01:16,490
paragraph in a person.

20
00:01:16,600 --> 00:01:20,650
So again there a click prop is executed as a method,

21
00:01:20,830 --> 00:01:28,000
so I should add a click prop to my person here click and there, I should reference this deletePersonHandler

22
00:01:30,280 --> 00:01:36,580
Now when I click the person I want to execute this method and I want to delete this person here of course,

23
00:01:36,580 --> 00:01:42,340
now for that, I need to know which person is this case since we output a dynamic list here, I don't

24
00:01:42,340 --> 00:01:43,700
know by now.

25
00:01:43,810 --> 00:01:48,730
The good thing is this map method also exposes a second argument,

26
00:01:48,940 --> 00:01:55,960
besides the person which I use thus far, I can add a second argument or receive it I should say, the index

27
00:01:56,050 --> 00:02:04,120
in the array and as a side note if you use more than one argument in an ES6 arrow function, you have

28
00:02:04,120 --> 00:02:07,480
to wrap the arguments in parentheses.

29
00:02:07,480 --> 00:02:09,640
So we get this index for free,

30
00:02:09,650 --> 00:02:15,280
passed in automatically and I want to pass it to the deletePersonHandler.

31
00:02:15,490 --> 00:02:23,430
I will use the syntax where I executed as a arrow function here and hence now am able to pass index

32
00:02:23,440 --> 00:02:24,430
like this.

33
00:02:24,430 --> 00:02:28,670
The alternative would be bind this comma index.

34
00:02:29,290 --> 00:02:32,920
So now we can receive this in the deletePersonHandler,

35
00:02:33,010 --> 00:02:42,010
there of course I need to be prepared to get the person index and I can now use it in here to update

36
00:02:42,010 --> 00:02:43,840
my state accordingly.

37
00:02:43,840 --> 00:02:51,250
First of all, I will fetch all the persons so I will reach out to this state persons and then I want

38
00:02:51,250 --> 00:02:54,820
to create a new version of that person's array.

39
00:02:54,820 --> 00:03:02,420
I simply want to call persons splice and I want to start splicing a person index and splice one element.

40
00:03:02,440 --> 00:03:10,570
This simply removes one element from the array and thereafter I can call this set state and set persons

41
00:03:10,840 --> 00:03:18,120
to persons to my persons constant which was updated though by splicing one element.

42
00:03:18,340 --> 00:03:21,190
And in case you're wondering how I can edit a constant,

43
00:03:21,190 --> 00:03:27,970
keeps in mind arrays and objects are reference types so I didn't assign a new value to the constant,

44
00:03:27,970 --> 00:03:29,960
it is only holding a pointer,

45
00:03:29,980 --> 00:03:32,480
I only changed the element it was pointing to,

46
00:03:32,500 --> 00:03:35,840
that's just some general javascript knowledge though.

47
00:03:35,980 --> 00:03:41,590
So with this we set the state of the persons to the new persons, the updated persons

48
00:03:41,590 --> 00:03:44,650
and this approach has a flaw we'll fix soon.

49
00:03:44,950 --> 00:03:46,400
Let's try it out though,

50
00:03:46,540 --> 00:03:53,660
let me save this file and let's go back toggle persons and we get the same warnings as before.

51
00:03:53,860 --> 00:03:57,870
Let's click on the paragraph as you can see, it does work.

52
00:03:57,880 --> 00:04:03,910
We can now remove the persons and exactly the one on which you clicked like Mnau or Max.

53
00:04:03,940 --> 00:04:10,300
However I said that this approach has a flaw and I will dive deeper into that flaw in the next lecture.