1
00:00:01,140 --> 00:00:04,860
‫And now let's learn how to use the second way

2
00:00:04,860 --> 00:00:09,723
‫of storing state in the URL, which is the Query string,

3
00:00:11,340 --> 00:00:14,100
‫and so in this lecture, I want to do exactly

4
00:00:14,100 --> 00:00:17,880
‫what I showed you in that slide two lectures ago.

5
00:00:17,880 --> 00:00:20,820
‫So where we added the position

6
00:00:20,820 --> 00:00:25,623
‫of the current city right here to the URL as a Query string.

7
00:00:27,330 --> 00:00:30,720
‫So adding that data to the Query string

8
00:00:30,720 --> 00:00:33,240
‫is actually really, really easy.

9
00:00:33,240 --> 00:00:36,330
‫All we have to do is to edit here to the path

10
00:00:36,330 --> 00:00:39,933
‫that the user will go to when they click on this link.

11
00:00:41,550 --> 00:00:45,000
‫So here we are in the city item component

12
00:00:45,000 --> 00:00:47,763
‫which gets access to the current city.

13
00:00:48,630 --> 00:00:50,830
‫So basically we are

14
00:00:52,080 --> 00:00:54,720
‫right here in each of these components,

15
00:00:54,720 --> 00:00:56,110
‫and so remember

16
00:00:57,300 --> 00:01:02,300
‫that each of them gets also access to a position object.

17
00:01:02,940 --> 00:01:05,523
‫So let's lock that to the console,

18
00:01:08,370 --> 00:01:09,870
‫and so here they are.

19
00:01:09,870 --> 00:01:13,560
‫So here we have like each of these position objects

20
00:01:13,560 --> 00:01:15,330
‫for each of the cities.

21
00:01:15,330 --> 00:01:19,260
‫So it contains the latitude and the longitude,

22
00:01:19,260 --> 00:01:22,953
‫and so let's now add the latitude to our string.

23
00:01:24,120 --> 00:01:26,550
‫So here we are building this URL.

24
00:01:26,550 --> 00:01:28,560
‫So we already have the ID,

25
00:01:28,560 --> 00:01:30,810
‫and now we need to question mark

26
00:01:30,810 --> 00:01:33,420
‫and then the name of the state variable

27
00:01:33,420 --> 00:01:35,910
‫that we want to share, basically,

28
00:01:35,910 --> 00:01:39,090
‫or we can also just call this another parameter,

29
00:01:39,090 --> 00:01:42,210
‫but a parameter of the Query string.

30
00:01:42,210 --> 00:01:47,210
‫So let's call this one, "lat" for latitude, then equal,

31
00:01:47,580 --> 00:01:50,883
‫and then finally, let's add the dynamic data.

32
00:01:51,990 --> 00:01:53,099
‫So

33
00:01:53,099 --> 00:01:55,287
‫"position.lat".

34
00:01:56,190 --> 00:01:57,060
‫All right,

35
00:01:57,060 --> 00:02:00,600
‫and so now when we click here on one of these links

36
00:02:00,600 --> 00:02:01,530
‫then

37
00:02:01,530 --> 00:02:04,980
‫that moved right here into the URL,

38
00:02:04,980 --> 00:02:08,340
‫and it's important that it always follows this format.

39
00:02:08,340 --> 00:02:11,880
‫So first, the regular URL, then the question mark,

40
00:02:11,880 --> 00:02:16,590
‫and then the variable name equal, and then the data itself.

41
00:02:16,590 --> 00:02:21,330
‫And of course this would've worked on a non-dynamic route,

42
00:02:21,330 --> 00:02:23,610
‫so a route without this ID.

43
00:02:23,610 --> 00:02:26,130
‫So for example, like this, right?

44
00:02:26,130 --> 00:02:31,130
‫So it doesn't have to be a URL with a Param in there.

45
00:02:31,140 --> 00:02:33,990
‫But anyway, we can add more.

46
00:02:33,990 --> 00:02:37,020
‫So for that, we just use the "&" symbol

47
00:02:37,020 --> 00:02:39,423
‫and then we can just define another one.

48
00:02:40,800 --> 00:02:43,020
‫So let's go for the longitude here,

49
00:02:43,020 --> 00:02:44,047
‫and so

50
00:02:44,047 --> 00:02:47,940
‫"position.lng"

51
00:02:47,940 --> 00:02:49,920
‫and now we don't need to test this

52
00:02:49,920 --> 00:02:52,770
‫but I still need to click here now again

53
00:02:52,770 --> 00:02:55,590
‫so that I can show you that the state

54
00:02:55,590 --> 00:02:58,140
‫that we had here inside our application,

55
00:02:58,140 --> 00:03:01,710
‫was now transferred to the URL.

56
00:03:01,710 --> 00:03:05,130
‫So we have both the latitude and the longitude

57
00:03:05,130 --> 00:03:08,820
‫right now in this globally accessible URL,

58
00:03:08,820 --> 00:03:13,410
‫and so it is as if this data is now global state,

59
00:03:13,410 --> 00:03:16,380
‫which we can access from everywhere.

60
00:03:16,380 --> 00:03:20,043
‫So that includes, for example here, this map component.

61
00:03:21,060 --> 00:03:24,660
‫So let's now move to this map component

62
00:03:24,660 --> 00:03:26,940
‫which we already created earlier,

63
00:03:26,940 --> 00:03:29,490
‫and so in here, let's now try to read

64
00:03:29,490 --> 00:03:33,480
‫this latitude and longitude data from the URL.

65
00:03:33,480 --> 00:03:37,690
‫And so for that, we use the "useSearchParams" custom hook

66
00:03:38,550 --> 00:03:41,880
‫that React Router gives us.

67
00:03:41,880 --> 00:03:44,936
‫So here it is, "useSearchParams"

68
00:03:44,936 --> 00:03:49,530
‫and this one is a bit similar to React use data hook,

69
00:03:49,530 --> 00:03:51,090
‫so it returns an array

70
00:03:51,090 --> 00:03:53,740
‫which has basically the current state

71
00:03:56,400 --> 00:04:00,303
‫which we usually call the "SearchParams"

72
00:04:01,140 --> 00:04:04,230
‫and then second, we get a function with which

73
00:04:04,230 --> 00:04:07,500
‫we can set the SearchParams

74
00:04:07,500 --> 00:04:10,953
‫so we can also update the SearchParams in this way.

75
00:04:14,100 --> 00:04:15,387
‫Equals this.

76
00:04:15,387 --> 00:04:16,533
‫Now okay?

77
00:04:18,690 --> 00:04:22,440
‫And now let's try to store first the latitude

78
00:04:22,440 --> 00:04:24,540
‫into this lat variable,

79
00:04:24,540 --> 00:04:28,890
‫because this data is actually not directly accessible

80
00:04:28,890 --> 00:04:30,570
‫on the SearchParams,

81
00:04:30,570 --> 00:04:34,470
‫so it's not like an object that gives us this data here.

82
00:04:34,470 --> 00:04:39,420
‫Instead it's an object onto which we need to now call

83
00:04:39,420 --> 00:04:41,250
‫the get method.

84
00:04:41,250 --> 00:04:45,510
‫So get, and then the name of the variable itself.

85
00:04:45,510 --> 00:04:49,260
‫So lat, which is exactly this name right here.

86
00:04:49,260 --> 00:04:51,843
‫So this needs to match this.

87
00:04:52,980 --> 00:04:56,433
‫Okay, and then let's do the same for the longitude.

88
00:04:58,440 --> 00:05:01,683
‫So "=searchParams.get"

89
00:05:02,707 --> 00:05:03,540
‫"lng"

90
00:05:04,800 --> 00:05:06,220
‫and so

91
00:05:07,890 --> 00:05:11,280
‫here, let's now first display an H1,

92
00:05:11,280 --> 00:05:13,653
‫so that we can actually see something,

93
00:05:14,850 --> 00:05:17,523
‫and then here, let's say position,

94
00:05:19,380 --> 00:05:21,160
‫and then the latitude

95
00:05:22,650 --> 00:05:25,110
‫and the longitude.

96
00:05:25,110 --> 00:05:28,290
‫Give it a save, and there it is.

97
00:05:28,290 --> 00:05:32,253
‫So this is exactly the data that we have here in our URL,

98
00:05:33,150 --> 00:05:35,100
‫and so basically with this,

99
00:05:35,100 --> 00:05:38,220
‫by clicking on one of these links in the list,

100
00:05:38,220 --> 00:05:40,830
‫we successfully share the state,

101
00:05:40,830 --> 00:05:42,660
‫so in this case the position state

102
00:05:42,660 --> 00:05:44,640
‫with our entire application,

103
00:05:44,640 --> 00:05:48,210
‫so at every component that wants to access it.

104
00:05:48,210 --> 00:05:49,890
‫So now I clicked on this one

105
00:05:49,890 --> 00:05:53,820
‫and then the position changed here to this one,

106
00:05:53,820 --> 00:05:56,850
‫and we can of course now use this

107
00:05:56,850 --> 00:06:00,060
‫in many different components.

108
00:06:00,060 --> 00:06:05,060
‫So let's grab this and move here into the city component,

109
00:06:05,070 --> 00:06:06,720
‫and let's do the same thing here.

110
00:06:08,940 --> 00:06:12,540
‫So of course now we need to include this again.

111
00:06:12,540 --> 00:06:14,640
‫So "useSearchParams"

112
00:06:14,640 --> 00:06:19,640
‫and so this then edited to the imports, exactly,

113
00:06:20,250 --> 00:06:24,123
‫and then let's return just something else here.

114
00:06:27,420 --> 00:06:30,843
‫So doing the same thing, position, lng,

115
00:06:32,910 --> 00:06:35,460
‫and then the latitude.

116
00:06:35,460 --> 00:06:37,203
‫Now here, React is not happy,

117
00:06:38,760 --> 00:06:41,883
‫so let's do a fragment here in this case.

118
00:06:44,550 --> 00:06:46,110
‫So now this is really small,

119
00:06:46,110 --> 00:06:50,310
‫but the point is that the data is actually exactly the same.

120
00:06:50,310 --> 00:06:52,440
‫Not the same order, but

121
00:06:52,440 --> 00:06:53,940
‫well that's

122
00:06:53,940 --> 00:06:57,150
‫not really that important, but once again,

123
00:06:57,150 --> 00:06:59,970
‫we were now able to pass this data here

124
00:06:59,970 --> 00:07:02,220
‫into all kinds of different components

125
00:07:02,220 --> 00:07:03,870
‫without having to store it

126
00:07:03,870 --> 00:07:06,750
‫anywhere inside a React application.

127
00:07:06,750 --> 00:07:09,840
‫So we didn't have to create any new piece of state

128
00:07:09,840 --> 00:07:12,657
‫but instead we just stored it in the URL

129
00:07:12,657 --> 00:07:15,480
‫and then made it accessible everywhere,

130
00:07:15,480 --> 00:07:17,670
‫and so this is going to be really helpful

131
00:07:17,670 --> 00:07:20,040
‫here in the future to move the map

132
00:07:20,040 --> 00:07:23,913
‫to exactly the position of the city that was loaded here.

133
00:07:25,680 --> 00:07:30,120
‫So remember that we got the state here into the URL

134
00:07:30,120 --> 00:07:34,740
‫in the first place by passing it here into the link,

135
00:07:34,740 --> 00:07:37,530
‫so into the two prop of the link.

136
00:07:37,530 --> 00:07:40,290
‫So this is how we create a Query string.

137
00:07:40,290 --> 00:07:43,120
‫But we can also then update the Query string

138
00:07:44,370 --> 00:07:48,543
‫as I mentioned before, using this setSearchParam functions.

139
00:07:49,620 --> 00:07:52,293
‫So let's do that here as well.

140
00:07:54,000 --> 00:07:58,443
‫So I will just create a temporary button here.

141
00:08:00,060 --> 00:08:04,173
‫Let's say change position with an on click handler,

142
00:08:06,030 --> 00:08:09,120
‫and so here, let's just create a quick function

143
00:08:09,120 --> 00:08:10,953
‫because this is just to demonstrate.

144
00:08:11,820 --> 00:08:13,770
‫So here we can now say setSearchParams,

145
00:08:15,930 --> 00:08:19,080
‫and then here we need to actually pass in an object

146
00:08:19,080 --> 00:08:21,363
‫with the entire new Query string.

147
00:08:22,380 --> 00:08:25,840
‫So let's say the latitude should be 23

148
00:08:27,240 --> 00:08:29,193
‫and the longitude should be,

149
00:08:30,090 --> 00:08:30,993
‫let's say 50.

150
00:08:32,070 --> 00:08:35,970
‫All right, so here we don't use the set function

151
00:08:35,970 --> 00:08:39,390
‫as you might expect but instead we now need to pass in

152
00:08:39,390 --> 00:08:41,910
‫a brand new object here,

153
00:08:41,910 --> 00:08:44,460
‫and so let's see what happens,

154
00:08:44,460 --> 00:08:46,830
‫and there we go.

155
00:08:46,830 --> 00:08:51,180
‫And notice how actually this state has updated everywhere,

156
00:08:51,180 --> 00:08:53,490
‫and so that is really powerful.

157
00:08:53,490 --> 00:08:56,670
‫So it changed not only of course in the URL,

158
00:08:56,670 --> 00:08:59,460
‫but also everywhere in the application

159
00:08:59,460 --> 00:09:01,680
‫where this data is read.

160
00:09:01,680 --> 00:09:05,820
‫So it changed here to 23, 50, and the same thing here,

161
00:09:05,820 --> 00:09:07,320
‫even though it's really small,

162
00:09:07,320 --> 00:09:11,460
‫but notice how it did change really everywhere.

163
00:09:11,460 --> 00:09:15,240
‫Now, okay, and so now with all this in place

164
00:09:15,240 --> 00:09:19,320
‫so with both the Params and the Query string now working,

165
00:09:19,320 --> 00:09:22,170
‫we can demonstrate one of the great advantages

166
00:09:22,170 --> 00:09:25,530
‫of having all the state stored in the URL

167
00:09:25,530 --> 00:09:27,390
‫that we talked about earlier,

168
00:09:27,390 --> 00:09:30,840
‫which is that now we can just take this URL

169
00:09:30,840 --> 00:09:33,990
‫and then for example, share it with someone.

170
00:09:33,990 --> 00:09:36,810
‫So you can now copy this and then send it

171
00:09:36,810 --> 00:09:40,050
‫in some WhatsApp message or something like that,

172
00:09:40,050 --> 00:09:43,350
‫and then the other person can open up their browser,

173
00:09:43,350 --> 00:09:46,800
‫paste that URL there, open it up,

174
00:09:46,800 --> 00:09:51,150
‫and then they will see the page at exactly the same state.

175
00:09:51,150 --> 00:09:53,550
‫So we are in the same city here

176
00:09:53,550 --> 00:09:57,360
‫with the same position being displayed here and in a map.

177
00:09:57,360 --> 00:10:00,180
‫So this app looks exactly like this one,

178
00:10:00,180 --> 00:10:03,450
‫and so once again, that's because of the power

179
00:10:03,450 --> 00:10:06,570
‫of storing all the state that is relevant here

180
00:10:06,570 --> 00:10:08,310
‫right in the URL.

181
00:10:08,310 --> 00:10:11,820
‫And so with this, we made the application more shareable

182
00:10:11,820 --> 00:10:16,470
‫and also bookmarkable, if that's even a word.

183
00:10:16,470 --> 00:10:20,790
‫But anyway, as you just saw throughout these two lectures,

184
00:10:20,790 --> 00:10:25,470
‫using Params and Query strings really are amazing techniques

185
00:10:25,470 --> 00:10:28,140
‫that you are going to start using all the time

186
00:10:28,140 --> 00:10:31,353
‫once you start using React Router on your own.