1
00:00:01,080 --> 00:00:03,660
‫So, as I was just saying

2
00:00:03,660 --> 00:00:06,750
‫let's now go back to our Eat-'N-Split app

3
00:00:06,750 --> 00:00:11,043
‫to fix one problem that we have left in that application.

4
00:00:12,510 --> 00:00:15,480
‫So, let's come to our desktop

5
00:00:15,480 --> 00:00:19,893
‫and then grab the project folder and open it in VS Code.

6
00:00:21,510 --> 00:00:25,860
‫Okay, and so now we have two VS Code windows open,

7
00:00:25,860 --> 00:00:29,733
‫and we will also start two React apps at the same time.

8
00:00:30,960 --> 00:00:33,270
‫So, let's just write npm start,

9
00:00:33,270 --> 00:00:35,760
‫hit enter, and then it will ask you

10
00:00:35,760 --> 00:00:38,490
‫to use another port instead.

11
00:00:38,490 --> 00:00:40,980
‫And so, that's simply because you're already running

12
00:00:40,980 --> 00:00:45,210
‫one app here in this other port, and of course,

13
00:00:45,210 --> 00:00:47,943
‫each one can only have one app running.

14
00:00:48,780 --> 00:00:50,830
‫So, just hit enter or Y

15
00:00:51,750 --> 00:00:54,420
‫as you reached this step, and then you will see

16
00:00:54,420 --> 00:00:56,913
‫your application pop up right here.

17
00:00:57,960 --> 00:00:59,970
‫Let's get a bit more space,

18
00:00:59,970 --> 00:01:01,560
‫and then, let me show you the problem

19
00:01:01,560 --> 00:01:03,303
‫that we actually left here.

20
00:01:04,140 --> 00:01:07,290
‫So, let's say that we typed some values in here,

21
00:01:07,290 --> 00:01:09,663
‫and then, we moved to another friend.

22
00:01:11,130 --> 00:01:15,630
‫So, here we have exactly the same problem as before.

23
00:01:15,630 --> 00:01:17,820
‫So, as we select another friend,

24
00:01:17,820 --> 00:01:20,910
‫the only thing that changes is really the props

25
00:01:20,910 --> 00:01:23,523
‫that is being passed here into this component.

26
00:01:24,750 --> 00:01:27,060
‫So, let's check out the name of that component

27
00:01:27,060 --> 00:01:28,473
‫as I don't remember it.

28
00:01:30,090 --> 00:01:31,590
‫So,

29
00:01:31,590 --> 00:01:33,090
‫yeah, it's this FormSplitBill.

30
00:01:34,620 --> 00:01:38,340
‫So this one receives the selectedfriend object,

31
00:01:38,340 --> 00:01:41,400
‫but as you see here, as we change,

32
00:01:41,400 --> 00:01:43,770
‫nothing changes in the dumbtree.

33
00:01:43,770 --> 00:01:46,140
‫And so, across these re-renders,

34
00:01:46,140 --> 00:01:49,680
‫exactly the same component is rendered in exactly

35
00:01:49,680 --> 00:01:51,900
‫the same position of the tree.

36
00:01:51,900 --> 00:01:53,610
‫So, just like before.

37
00:01:53,610 --> 00:01:58,260
‫And so, therefore, the state is not reset across renders,

38
00:01:58,260 --> 00:02:00,630
‫but also just like before,

39
00:02:00,630 --> 00:02:03,480
‫this is not the behavior that we would expect

40
00:02:03,480 --> 00:02:06,150
‫in this application, right?

41
00:02:06,150 --> 00:02:09,780
‫So, if suddenly we move from one friend to the other one,

42
00:02:09,780 --> 00:02:12,720
‫we would certainly expect that the bill value here

43
00:02:12,720 --> 00:02:15,240
‫should be reset.

44
00:02:15,240 --> 00:02:17,790
‫So how can we do that?

45
00:02:17,790 --> 00:02:22,737
‫Well, let's see where we are using this form SplitBill.

46
00:02:24,690 --> 00:02:27,603
‫So, that should be somewhere here in the app probably.

47
00:02:30,180 --> 00:02:32,220
‫So,

48
00:02:32,220 --> 00:02:33,960
‫yeah, here it is.

49
00:02:33,960 --> 00:02:36,120
‫And so, now we basically need to make

50
00:02:36,120 --> 00:02:38,880
‫each component instance here unique

51
00:02:38,880 --> 00:02:40,920
‫so that each time that it is rendered

52
00:02:40,920 --> 00:02:43,650
‫with a new friend, React will see this

53
00:02:43,650 --> 00:02:46,650
‫as a completely new component instance.

54
00:02:46,650 --> 00:02:49,710
‫And as you already know, the way we do that

55
00:02:49,710 --> 00:02:51,420
‫is by providing a key

56
00:02:51,420 --> 00:02:55,350
‫that will actually change across the re-renders.

57
00:02:55,350 --> 00:03:00,000
‫So here we can use the selectedfriend.id,

58
00:03:00,000 --> 00:03:00,833
‫I guess.

59
00:03:01,740 --> 00:03:04,953
‫So let's just see if they actually have an ID,

60
00:03:05,910 --> 00:03:06,993
‫and, yeah, they have.

61
00:03:07,950 --> 00:03:10,470
‫So, we could also use the name here, really.

62
00:03:10,470 --> 00:03:14,220
‫So, those are also different, but the ID is really

63
00:03:14,220 --> 00:03:15,633
‫a unique identifier.

64
00:03:17,370 --> 00:03:18,690
‫So let's see.

65
00:03:18,690 --> 00:03:21,870
‫So we are at Sarah, and so, therefore,

66
00:03:21,870 --> 00:03:23,163
‫let's see down here.

67
00:03:24,000 --> 00:03:27,873
‫So, here we see that the key now is 933 whatever.

68
00:03:29,880 --> 00:03:33,390
‫And so, let's move to another friend.

69
00:03:33,390 --> 00:03:35,430
‫And there we go.

70
00:03:35,430 --> 00:03:37,230
‫So we fixed our problem

71
00:03:37,230 --> 00:03:41,220
‫because now, the component instance has another key,

72
00:03:41,220 --> 00:03:44,460
‫and so, therefore it is a completely unique instance

73
00:03:44,460 --> 00:03:45,930
‫right now.

74
00:03:45,930 --> 00:03:48,090
‫Great, and that's actually it.

75
00:03:48,090 --> 00:03:50,040
‫So that's all we have to do here.

76
00:03:50,040 --> 00:03:51,750
‫So let's close this one.

77
00:03:51,750 --> 00:03:54,210
‫And let's also close this.

78
00:03:54,210 --> 00:03:55,530
‫So we are finished.

79
00:03:55,530 --> 00:03:58,590
‫We are back in our project that we were working on before.

80
00:03:58,590 --> 00:04:01,320
‫And so, yeah, there's nothing left to do.

81
00:04:01,320 --> 00:04:04,053
‫And so, let's move on right to the next lecture.