Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,160 --> 00:00:05,210
And of course we can do this with functions.
2
00:00:05,210 --> 00:00:06,570
We can add a function
3
00:00:06,570 --> 00:00:11,067
that's called the addFavoriteHandler() {} for example,
4
00:00:13,810 --> 00:00:17,203
and a function that we could call removeFavoriteHandler()
5
00:00:18,350 --> 00:00:20,950
and I will also add a helper function
6
00:00:20,950 --> 00:00:24,140
which I'll name itemIsFavoriteHandler.
7
00:00:24,140 --> 00:00:27,680
That's a function which will later help us determine
8
00:00:27,680 --> 00:00:30,183
whether a given item is a favorite or not.
9
00:00:31,640 --> 00:00:33,960
Now in the addFavoriteHandler item,
10
00:00:33,960 --> 00:00:38,150
I expect to get my favoriteMeetup as a parameter.
11
00:00:38,150 --> 00:00:38,990
And then in there,
12
00:00:38,990 --> 00:00:42,810
I wanna set my user favorites to the old array
13
00:00:42,810 --> 00:00:45,570
plus this new item.
14
00:00:45,570 --> 00:00:46,500
Now for this,
15
00:00:46,500 --> 00:00:51,360
we could use userFavorites.concat
16
00:00:51,360 --> 00:00:53,532
and add the (favoriteMeetup);
17
00:00:53,532 --> 00:00:57,320
Concat is like push but returns a new array,
18
00:00:57,320 --> 00:01:01,400
and it's then this new array with that added Meetup
19
00:01:01,400 --> 00:01:03,403
which we set as our new state.
20
00:01:04,720 --> 00:01:06,360
But there is a gotcha.
21
00:01:06,360 --> 00:01:08,160
We should not do it like this
22
00:01:08,160 --> 00:01:10,740
even though it's typically will work.
23
00:01:10,740 --> 00:01:13,370
When working with useState,
24
00:01:13,370 --> 00:01:17,382
it is worth knowing that React actually does not process
25
00:01:17,382 --> 00:01:19,570
state updates instantly
26
00:01:19,570 --> 00:01:22,380
but it schedules them behind the scenes.
27
00:01:22,380 --> 00:01:25,930
And it still then processes them very quickly
28
00:01:25,930 --> 00:01:28,053
but not instantly necessarily.
29
00:01:28,940 --> 00:01:32,080
Now because of that, when you update your state,
30
00:01:32,080 --> 00:01:37,050
and your state updates depends on the latest state snapshot,
31
00:01:37,050 --> 00:01:41,620
there is a scenario where the state snapshot
32
00:01:41,620 --> 00:01:45,000
does not really reflect the latest state
33
00:01:45,000 --> 00:01:48,463
because the last state update wasn't processed yet.
34
00:01:49,760 --> 00:01:54,760
And because that is the case, there is an alternative form
35
00:01:54,980 --> 00:01:58,260
of calling this state updating function
36
00:01:58,260 --> 00:02:03,150
if you depend on that last state snapshot.
37
00:02:03,150 --> 00:02:07,200
Instead of passing the new value as I did it a second ago,
38
00:02:07,200 --> 00:02:11,580
you should pass a function to the state updating function.
39
00:02:11,580 --> 00:02:16,220
And that function will be executed for you by React.
40
00:02:16,220 --> 00:02:18,530
That function will then automatically
41
00:02:18,530 --> 00:02:21,610
receive the previous state snapshot.
42
00:02:21,610 --> 00:02:24,380
So the (prevUserFavorites) here,
43
00:02:24,380 --> 00:02:27,020
and you should return the updated state here.
44
00:02:27,020 --> 00:02:28,923
So in this case, (prevUserFavorites) where
45
00:02:30,300 --> 00:02:34,823
we then concat the {favoriteMeetup}; we get as a parameter.
46
00:02:36,210 --> 00:02:37,400
This will guarantee
47
00:02:37,400 --> 00:02:40,510
that we always get the latest state snapshot here,
48
00:02:40,510 --> 00:02:43,950
because React will execute these functions,
49
00:02:43,950 --> 00:02:46,550
which we pass through the state updating functions
50
00:02:46,550 --> 00:02:48,630
in the correct order.
51
00:02:48,630 --> 00:02:51,470
So now, we have a guaranteed that we definitely work
52
00:02:51,470 --> 00:02:54,100
on the latest state snapshot here,
53
00:02:54,100 --> 00:02:58,230
and that's therefore the better way of updating your state,
54
00:02:58,230 --> 00:03:02,800
if you depend on a previous version of that state.
55
00:03:02,800 --> 00:03:06,690
And that's now how we could add a favorite item.
56
00:03:06,690 --> 00:03:09,120
Now in removeFavoriteHandler,
57
00:03:09,120 --> 00:03:12,010
we probably can expect a {meetupId}
58
00:03:12,010 --> 00:03:15,370
which identifies the meetup that should be removed.
59
00:03:15,370 --> 00:03:17,960
And then we can update userFavorites.
60
00:03:17,960 --> 00:03:22,810
Again, with this state updating a function,
61
00:03:22,810 --> 00:03:25,580
where we get the prevUserFavorites
62
00:03:25,580 --> 00:03:27,970
and return a new state snapshot
63
00:03:27,970 --> 00:03:32,630
because here again, we rely on that previous state.
64
00:03:32,630 --> 00:03:37,120
And here we then wanna return prevUserFavorites.filter();
65
00:03:37,120 --> 00:03:39,860
because filter returns a new array
66
00:03:39,860 --> 00:03:42,570
where we can filter out items.
67
00:03:42,570 --> 00:03:44,790
And I wanna filter out the item
68
00:03:44,790 --> 00:03:47,690
where the meetupId matches this Id
69
00:03:47,690 --> 00:03:49,203
we're getting as a parameter.
70
00:03:50,160 --> 00:03:52,190
Filter is a built in method,
71
00:03:52,190 --> 00:03:54,720
which takes a function as an argument
72
00:03:54,720 --> 00:03:57,390
which executes for every item in this array,
73
00:03:57,390 --> 00:04:00,650
and we get that item as a parameter then
74
00:04:00,650 --> 00:04:02,670
and then we have to return true
75
00:04:02,670 --> 00:04:04,210
if we wanna keep that item
76
00:04:04,210 --> 00:04:07,900
or false if we wanna get rid of it in that new array
77
00:04:07,900 --> 00:04:09,290
which has returned.
78
00:04:09,290 --> 00:04:11,090
And here I wanna return true
79
00:04:11,090 --> 00:04:16,089
if meetup.id !==meetupId I get as a parameter.
80
00:04:16,690 --> 00:04:18,260
So, if it is equal,
81
00:04:18,260 --> 00:04:21,279
we return false here because of this check,
82
00:04:21,279 --> 00:04:25,420
and that means we drop the item where the Id is equal.
83
00:04:25,420 --> 00:04:28,360
And that means that the returned array will be missing
84
00:04:28,360 --> 00:04:30,960
the item which has this meetupId,
85
00:04:30,960 --> 00:04:32,680
which is exactly what we need here,
86
00:04:32,680 --> 00:04:35,053
since we want to remove that item.
87
00:04:35,940 --> 00:04:38,680
And in itemIsFavoriteHandler,
88
00:04:38,680 --> 00:04:41,610
I just want to return a response here,
89
00:04:41,610 --> 00:04:43,120
I return a value,
90
00:04:43,120 --> 00:04:45,540
and I want to check whether...
91
00:04:45,540 --> 00:04:50,540
Let's say an item with a given Id is part of our favorites.
92
00:04:50,610 --> 00:04:53,220
And for this, we don't need to update any state.
93
00:04:53,220 --> 00:04:55,170
It's just a helper function
94
00:04:55,170 --> 00:04:58,580
where I return userFavorites.some();
95
00:04:58,580 --> 00:05:00,400
which is a nav built-in method
96
00:05:00,400 --> 00:05:03,200
which exists in Vanilla JavaScript.
97
00:05:03,200 --> 00:05:07,520
And some also wants a function as an argument
98
00:05:07,520 --> 00:05:10,520
which executes for every item in this array,
99
00:05:10,520 --> 00:05:13,810
and this function should return true or false.
100
00:05:13,810 --> 00:05:17,980
And if at least one of the items in the array returns true
101
00:05:17,980 --> 00:05:19,990
or false with that function,
102
00:05:19,990 --> 00:05:23,930
some overall will return true or false.
103
00:05:23,930 --> 00:05:25,480
And that allows us to find out
104
00:05:25,480 --> 00:05:30,460
if some item in this array matches our condition here.
105
00:05:30,460 --> 00:05:34,910
And the condition is that some meetup.id is == meetupId
106
00:05:34,910 --> 00:05:36,910
we get as a parameter.
107
00:05:36,910 --> 00:05:38,360
So we return true,
108
00:05:38,360 --> 00:05:43,360
if we have a meetup with that Id in our user favorites.
109
00:05:43,440 --> 00:05:48,440
Now we get these free functions for changing our context,
110
00:05:48,500 --> 00:05:52,633
but at the moment these functions are never called anywhere.
8649
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.