1
00:00:00,870 --> 00:00:06,120
In last video we made sure that anytime that a user goes to streams slash edits slash anything they

2
00:00:06,120 --> 00:00:08,310
see the stream edit component on the screen.

3
00:00:08,340 --> 00:00:13,380
We now need to make sure that we somehow get that little piece of information out of the Ural and communicate

4
00:00:13,380 --> 00:00:15,190
it down to stream at it.

5
00:00:15,240 --> 00:00:20,520
So I'm going to open up my stream at it component inside my code editor and on my components streams

6
00:00:20,640 --> 00:00:22,680
stream at it file.

7
00:00:22,680 --> 00:00:27,540
I'm going to add it on a reference to the prop's argument that this thing receives and then I'm going

8
00:00:27,540 --> 00:00:31,180
to cancel log out props like so.

9
00:00:31,230 --> 00:00:35,160
So I going to save this and I'll flip back over and we'll take a look at the props object that gets

10
00:00:35,160 --> 00:00:38,400
passed down to our component.

11
00:00:38,400 --> 00:00:41,410
All right so here's our prop's objects.

12
00:00:45,160 --> 00:00:48,480
Now you'll notice that there are a couple of props that are showing up inside of here.

13
00:00:48,730 --> 00:00:52,640
All of the props that you see are coming from re-act Rotterdam.

14
00:00:52,660 --> 00:00:58,600
We only have access to these props right here specifically because the stream component inside of our

15
00:00:58,610 --> 00:01:05,230
apts genius file is being rendered by a route component because stream at it is being rendered by route

16
00:01:05,380 --> 00:01:10,670
re-act router Dom automatically is going to add in a bunch of different props to stream edit.

17
00:01:10,750 --> 00:01:12,650
When it gets rendered onto the screen.

18
00:01:12,880 --> 00:01:13,980
And so these are the props.

19
00:01:13,990 --> 00:01:17,760
You see it right here being passed down from re-act router.

20
00:01:18,010 --> 00:01:21,400
There's a couple of different props in here that are going to be very handy over time.

21
00:01:21,400 --> 00:01:27,460
So history location and match right now to get our piece of information out of the well the prop that

22
00:01:27,460 --> 00:01:29,380
we care about is match.

23
00:01:29,380 --> 00:01:33,110
So I went to expand match now find prams and expand it.

24
00:01:33,460 --> 00:01:37,800
And you'll notice that we have a Preem here of ID 3.

25
00:01:37,870 --> 00:01:42,600
We see a 3 right here because the three is what is inside of the address bar.

26
00:01:42,640 --> 00:01:49,450
If I instead went to nine nine nine nine like so and then expanded match again I would now have an idea

27
00:01:49,450 --> 00:01:51,670
of 9 9 9 9.

28
00:01:51,820 --> 00:01:57,460
We see a pram with the name of ID specifically because that is what we put after the colon inside of

29
00:01:57,460 --> 00:01:59,010
our routing definition.

30
00:01:59,020 --> 00:02:01,780
So again inside the component Here's our route.

31
00:02:01,780 --> 00:02:04,420
We got streams at it and then Kolin ID.

32
00:02:04,450 --> 00:02:11,270
So because we said Id right here that is why we got a gram value with a key of ID.

33
00:02:11,320 --> 00:02:17,620
So if we wanted to we could change ideas well if I said Culin anything and then save this and went back

34
00:02:17,620 --> 00:02:18,170
over.

35
00:02:18,310 --> 00:02:21,130
I already got my refresh your soul ex-band match again.

36
00:02:21,430 --> 00:02:25,650
And now to expand pro-ams you see that it says anything.

37
00:02:25,700 --> 00:02:30,750
Now if you want to we could easily have multiple different harams or kind of these wildcard variables

38
00:02:30,780 --> 00:02:32,000
inside of r u r l.

39
00:02:32,340 --> 00:02:35,410
So we could have colon anything colon.

40
00:02:35,460 --> 00:02:38,030
Something else if we wanted to.

41
00:02:38,340 --> 00:02:43,740
So now we would only be able to see this component if we went to stream's at it slash some value and

42
00:02:43,740 --> 00:02:45,630
then slash some other value.

43
00:02:45,870 --> 00:02:48,770
Let's try that out really quickly just to make sure that we understand this.

44
00:02:48,830 --> 00:02:54,040
So I'm going to save this feed back over and then I'm going to manually navigate to streams slash at

45
00:02:54,050 --> 00:03:00,570
it slash 8:51 slash I'm some value like so.

46
00:03:00,810 --> 00:03:02,510
Now I again see stream at it.

47
00:03:02,700 --> 00:03:08,490
If I expand my props and expand match again I can look at Priam's and now I have anything with 9 9 9

48
00:03:08,910 --> 00:03:11,230
and I have something else with I'm some value.

49
00:03:12,200 --> 00:03:17,290
So in practice we are not limited to just putting one of these wild card values or one of these match

50
00:03:17,320 --> 00:03:19,410
Paramo inside of or Euro u r l.

51
00:03:19,430 --> 00:03:24,680
We can put as many as we want but right now we only need one value inside that Eurail because we just

52
00:03:24,680 --> 00:03:27,410
want to know the idea of the stream that we are trying to edit.

53
00:03:27,650 --> 00:03:32,420
So I got to go back over to my route over here and I'm going to revert this back to being just cool

54
00:03:32,420 --> 00:03:35,830
and Id like the.

55
00:03:35,950 --> 00:03:40,410
And now to make sure that I see the correct component on the screen I'm going to click on streaming

56
00:03:40,440 --> 00:03:43,870
on the top left side and then click on the edit button.

57
00:03:43,890 --> 00:03:44,650
One more time.

58
00:03:44,730 --> 00:03:46,930
And now I again see stream at it.

59
00:03:47,490 --> 00:03:47,750
OK.

60
00:03:47,760 --> 00:03:52,460
So we now know the exact ID of the stream that we're trying to edit.

61
00:03:52,500 --> 00:03:54,470
Anytime that we click on that edit button.

62
00:03:54,780 --> 00:03:59,760
So now the next thing I want to try to do is load up some information about that particular stream and

63
00:03:59,760 --> 00:04:01,570
show it on the on the screen.

64
00:04:01,590 --> 00:04:07,650
Remember eventually we want to allow a user to edit this information right we want to show the two text

65
00:04:07,650 --> 00:04:11,240
inputs inside there so will probably make use of redux farm or something like that.

66
00:04:11,430 --> 00:04:16,380
But whenever we go to the edit stream page we want to show the existing title and the existing description

67
00:04:16,410 --> 00:04:18,460
of the stream as it currently is.

68
00:04:18,660 --> 00:04:22,920
So we need to make sure that we've already loaded up the stream and that we can show some information

69
00:04:22,920 --> 00:04:23,500
from it.

70
00:04:23,640 --> 00:04:28,530
So like I said right now we'll just set a very early goal and say let's try to just print up the title

71
00:04:28,530 --> 00:04:32,810
and description and not worry about setting up Reebok's form or anything like that.

72
00:04:32,820 --> 00:04:36,320
So let's take a quick pause right here and we'll start to tackle that in the next video.