1
00:00:02,000 --> 00:00:05,000
And of course we can do this with functions.

2
00:00:05,000 --> 00:00:06,000
We can add a function

3
00:00:06,000 --> 00:00:11,000
that's called the addFavoriteHandler() {} for example,

4
00:00:13,000 --> 00:00:17,000
and a function that we could call removeFavoriteHandler()

5
00:00:18,000 --> 00:00:20,000
and I will also add a helper function

6
00:00:20,000 --> 00:00:24,000
which I'll name itemIsFavoriteHandler.

7
00:00:24,000 --> 00:00:27,000
That's a function which will later help us determine

8
00:00:27,000 --> 00:00:30,000
whether a given item is a favorite or not.

9
00:00:31,000 --> 00:00:33,000
Now in the addFavoriteHandler item,

10
00:00:33,000 --> 00:00:38,000
I expect to get my favoriteMeetup as a parameter.

11
00:00:38,000 --> 00:00:38,000
And then in there,

12
00:00:38,000 --> 00:00:42,000
I wanna set my user favorites to the old array

13
00:00:42,000 --> 00:00:45,000
plus this new item.

14
00:00:45,000 --> 00:00:46,000
Now for this,

15
00:00:46,000 --> 00:00:51,000
we could use userFavorites.concat

16
00:00:51,000 --> 00:00:53,000
and add the (favoriteMeetup);

17
00:00:53,000 --> 00:00:57,000
Concat is like push but returns a new array,

18
00:00:57,000 --> 00:01:01,000
and it's then this new array with that added Meetup

19
00:01:01,000 --> 00:01:03,000
which we set as our new state.

20
00:01:04,000 --> 00:01:06,000
But there is a gotcha.

21
00:01:06,000 --> 00:01:08,000
We should not do it like this

22
00:01:08,000 --> 00:01:10,000
even though it's typically will work.

23
00:01:10,000 --> 00:01:13,000
When working with useState,

24
00:01:13,000 --> 00:01:17,000
it is worth knowing that React actually does not process

25
00:01:17,000 --> 00:01:19,000
state updates instantly

26
00:01:19,000 --> 00:01:22,000
but it schedules them behind the scenes.

27
00:01:22,000 --> 00:01:25,000
And it still then processes them very quickly

28
00:01:25,000 --> 00:01:28,000
but not instantly necessarily.

29
00:01:28,000 --> 00:01:32,000
Now because of that, when you update your state,

30
00:01:32,000 --> 00:01:37,000
and your state updates depends on the latest state snapshot,

31
00:01:37,000 --> 00:01:41,000
there is a scenario where the state snapshot

32
00:01:41,000 --> 00:01:45,000
does not really reflect the latest state

33
00:01:45,000 --> 00:01:48,000
because the last state update wasn't processed yet.

34
00:01:49,000 --> 00:01:54,000
And because that is the case, there is an alternative form

35
00:01:54,000 --> 00:01:58,000
of calling this state updating function

36
00:01:58,000 --> 00:02:03,000
if you depend on that last state snapshot.

37
00:02:03,000 --> 00:02:07,000
Instead of passing the new value as I did it a second ago,

38
00:02:07,000 --> 00:02:11,000
you should pass a function to the state updating function.

39
00:02:11,000 --> 00:02:16,000
And that function will be executed for you by React.

40
00:02:16,000 --> 00:02:18,000
That function will then automatically

41
00:02:18,000 --> 00:02:21,000
receive the previous state snapshot.

42
00:02:21,000 --> 00:02:24,000
So the (prevUserFavorites) here,

43
00:02:24,000 --> 00:02:27,000
and you should return the updated state here.

44
00:02:27,000 --> 00:02:28,000
So in this case, (prevUserFavorites) where

45
00:02:30,000 --> 00:02:34,000
we then concat the {favoriteMeetup}; we get as a parameter.

46
00:02:36,000 --> 00:02:37,000
This will guarantee

47
00:02:37,000 --> 00:02:40,000
that we always get the latest state snapshot here,

48
00:02:40,000 --> 00:02:43,000
because React will execute these functions,

49
00:02:43,000 --> 00:02:46,000
which we pass through the state updating functions

50
00:02:46,000 --> 00:02:48,000
in the correct order.

51
00:02:48,000 --> 00:02:51,000
So now, we have a guaranteed that we definitely work

52
00:02:51,000 --> 00:02:54,000
on the latest state snapshot here,

53
00:02:54,000 --> 00:02:58,000
and that's therefore the better way of updating your state,

54
00:02:58,000 --> 00:03:02,000
if you depend on a previous version of that state.

55
00:03:02,000 --> 00:03:06,000
And that's now how we could add a favorite item.

56
00:03:06,000 --> 00:03:09,000
Now in removeFavoriteHandler,

57
00:03:09,000 --> 00:03:12,000
we probably can expect a {meetupId}

58
00:03:12,000 --> 00:03:15,000
which identifies the meetup that should be removed.

59
00:03:15,000 --> 00:03:17,000
And then we can update userFavorites.

60
00:03:17,000 --> 00:03:22,000
Again, with this state updating a function,

61
00:03:22,000 --> 00:03:25,000
where we get the prevUserFavorites

62
00:03:25,000 --> 00:03:27,000
and return a new state snapshot

63
00:03:27,000 --> 00:03:32,000
because here again, we rely on that previous state.

64
00:03:32,000 --> 00:03:37,000
And here we then wanna return prevUserFavorites.filter();

65
00:03:37,000 --> 00:03:39,000
because filter returns a new array

66
00:03:39,000 --> 00:03:42,000
where we can filter out items.

67
00:03:42,000 --> 00:03:44,000
And I wanna filter out the item

68
00:03:44,000 --> 00:03:47,000
where the meetupId matches this Id

69
00:03:47,000 --> 00:03:49,000
we're getting as a parameter.

70
00:03:50,000 --> 00:03:52,000
Filter is a built in method,

71
00:03:52,000 --> 00:03:54,000
which takes a function as an argument

72
00:03:54,000 --> 00:03:57,000
which executes for every item in this array,

73
00:03:57,000 --> 00:04:00,000
and we get that item as a parameter then

74
00:04:00,000 --> 00:04:02,000
and then we have to return true

75
00:04:02,000 --> 00:04:04,000
if we wanna keep that item

76
00:04:04,000 --> 00:04:07,000
or false if we wanna get rid of it in that new array

77
00:04:07,000 --> 00:04:09,000
which has returned.

78
00:04:09,000 --> 00:04:11,000
And here I wanna return true

79
00:04:11,000 --> 00:04:16,000
if meetup.id !==meetupId I get as a parameter.

80
00:04:16,000 --> 00:04:18,000
So, if it is equal,

81
00:04:18,000 --> 00:04:21,000
we return false here because of this check,

82
00:04:21,000 --> 00:04:25,000
and that means we drop the item where the Id is equal.

83
00:04:25,000 --> 00:04:28,000
And that means that the returned array will be missing

84
00:04:28,000 --> 00:04:30,000
the item which has this meetupId,

85
00:04:30,000 --> 00:04:32,000
which is exactly what we need here,

86
00:04:32,000 --> 00:04:35,000
since we want to remove that item.

87
00:04:35,000 --> 00:04:38,000
And in itemIsFavoriteHandler,

88
00:04:38,000 --> 00:04:41,000
I just want to return a response here,

89
00:04:41,000 --> 00:04:43,000
I return a value,

90
00:04:43,000 --> 00:04:45,000
and I want to check whether...

91
00:04:45,000 --> 00:04:50,000
Let's say an item with a given Id is part of our favorites.

92
00:04:50,000 --> 00:04:53,000
And for this, we don't need to update any state.

93
00:04:53,000 --> 00:04:55,000
It's just a helper function

94
00:04:55,000 --> 00:04:58,000
where I return userFavorites.some();

95
00:04:58,000 --> 00:05:00,000
which is a nav built-in method

96
00:05:00,000 --> 00:05:03,000
which exists in Vanilla JavaScript.

97
00:05:03,000 --> 00:05:07,000
And some also wants a function as an argument

98
00:05:07,000 --> 00:05:10,000
which executes for every item in this array,

99
00:05:10,000 --> 00:05:13,000
and this function should return true or false.

100
00:05:13,000 --> 00:05:17,000
And if at least one of the items in the array returns true

101
00:05:17,000 --> 00:05:19,000
or false with that function,

102
00:05:19,000 --> 00:05:23,000
some overall will return true or false.

103
00:05:23,000 --> 00:05:25,000
And that allows us to find out

104
00:05:25,000 --> 00:05:30,000
if some item in this array matches our condition here.

105
00:05:30,000 --> 00:05:34,000
And the condition is that some meetup.id is == meetupId

106
00:05:34,000 --> 00:05:36,000
we get as a parameter.

107
00:05:36,000 --> 00:05:38,000
So we return true,

108
00:05:38,000 --> 00:05:43,000
if we have a meetup with that Id in our user favorites.

109
00:05:43,000 --> 00:05:48,000
Now we get these free functions for changing our context,

110
00:05:48,000 --> 00:05:52,000
but at the moment these functions are never called anywhere.