1
00:00:02,000 --> 00:00:04,000
Now, we've got that layout in place,

2
00:00:04,000 --> 00:00:07,000
before we work on the actual data fetching

3
00:00:07,000 --> 00:00:09,000
and sending data to a backend,

4
00:00:09,000 --> 00:00:11,000
let's work on that detail page.

5
00:00:11,000 --> 00:00:13,000
We've got that Show Details button here

6
00:00:13,000 --> 00:00:16,000
but it's not doing anything right now.

7
00:00:17,000 --> 00:00:21,000
Now the goal of course, is to load this meetup ID page,

8
00:00:21,000 --> 00:00:23,000
this dynamic page,

9
00:00:23,000 --> 00:00:26,000
whenever we click on a single meetup item to be precise,

10
00:00:26,000 --> 00:00:29,000
when we click on that show details button.

11
00:00:29,000 --> 00:00:33,000
And therefore, we first of all need a link.

12
00:00:33,000 --> 00:00:37,000
Now for this here on meetup item

13
00:00:37,000 --> 00:00:39,000
on this meetup item component,

14
00:00:39,000 --> 00:00:41,000
we wanna create a link here.

15
00:00:41,000 --> 00:00:45,000
And of course, we could do this with the link component

16
00:00:45,000 --> 00:00:47,000
and this would be the correct way of doing that

17
00:00:47,000 --> 00:00:50,000
since this would render an anchor tag,

18
00:00:50,000 --> 00:00:54,000
but to show you how you could navigate programmatically

19
00:00:54,000 --> 00:00:57,000
something we will also need a later again

20
00:00:57,000 --> 00:00:59,000
when we submit a form and navigate a way,

21
00:00:59,000 --> 00:01:01,000
to show you this alternative.

22
00:01:01,000 --> 00:01:03,000
I will stick to a button here

23
00:01:03,000 --> 00:01:05,000
even though I will say that a link

24
00:01:05,000 --> 00:01:07,000
would technically be a bit better,

25
00:01:07,000 --> 00:01:08,000
but we'll stick to this button.

26
00:01:08,000 --> 00:01:12,000
And instead, I want to create a function here,

27
00:01:12,000 --> 00:01:15,000
a function which will then navigate us away.

28
00:01:15,000 --> 00:01:18,000
The Show Details handler, that could be the function name,

29
00:01:18,000 --> 00:01:20,000
and now we connect this button.

30
00:01:20,000 --> 00:01:22,000
We wanna click prop,

31
00:01:22,000 --> 00:01:25,000
queue this function,

32
00:01:25,000 --> 00:01:27,000
and in the function we now want

33
00:01:27,000 --> 00:01:28,000
to navigate programmatically.

34
00:01:28,000 --> 00:01:31,000
And we can navigate programmatically

35
00:01:31,000 --> 00:01:33,000
by using this, use router hook,

36
00:01:33,000 --> 00:01:36,000
which we saw earlier already.

37
00:01:36,000 --> 00:01:39,000
So we can import, use router, again,

38
00:01:39,000 --> 00:01:41,000
use router, from,

39
00:01:41,000 --> 00:01:44,000
next slash router,

40
00:01:44,000 --> 00:01:48,000
and we can then call use router here in the component,

41
00:01:48,000 --> 00:01:50,000
not in the show details handler,

42
00:01:50,000 --> 00:01:53,000
it's a React hook and therefore the rules of hooks apply

43
00:01:53,000 --> 00:01:55,000
and we should only use React hooks

44
00:01:55,000 --> 00:01:59,000
directly at the root level of a component function.

45
00:01:59,000 --> 00:02:02,000
And hence here we call, use router,

46
00:02:02,000 --> 00:02:04,000
get access to that router object,

47
00:02:04,000 --> 00:02:05,000
and extend this router object

48
00:02:05,000 --> 00:02:08,000
which we can use in the show details handler

49
00:02:08,000 --> 00:02:10,000
to navigate programmatically.

50
00:02:10,000 --> 00:02:12,000
Because this router object

51
00:02:12,000 --> 00:02:15,000
does not just have the query property

52
00:02:15,000 --> 00:02:17,000
which gives us access to all that data

53
00:02:17,000 --> 00:02:20,000
that might be part of the URL,

54
00:02:20,000 --> 00:02:22,000
for a dynamic page for example,

55
00:02:22,000 --> 00:02:25,000
but here we also have methods

56
00:02:25,000 --> 00:02:28,000
for navigating programmatically.

57
00:02:28,000 --> 00:02:30,000
For example, the push method.

58
00:02:30,000 --> 00:02:34,000
This pushes a new page onto the stack of pages

59
00:02:34,000 --> 00:02:38,000
and it's the equivalent of using the link component

60
00:02:38,000 --> 00:02:39,000
if you don't want a link

61
00:02:39,000 --> 00:02:42,000
but instead navigate programmatically.

62
00:02:42,000 --> 00:02:45,000
Push, therefore, also takes a path

63
00:02:45,000 --> 00:02:47,000
to which you want to navigate,

64
00:02:47,000 --> 00:02:50,000
and here, that should be our meetup ID

65
00:02:50,000 --> 00:02:53,000
because we have this meetup ID page here.

66
00:02:53,000 --> 00:02:57,000
Now the meetup ID is something we get why via props

67
00:02:57,000 --> 00:02:59,000
because when we rendered that meetup list,

68
00:02:59,000 --> 00:03:03,000
we passed the ID prop into the meetup item

69
00:03:03,000 --> 00:03:04,000
and therefore, instead of this meetup item,

70
00:03:04,000 --> 00:03:09,000
we can now construct a dynamic path here by using props ID.

71
00:03:11,000 --> 00:03:12,000
So this will lead us to slash,

72
00:03:12,000 --> 00:03:16,000
and then the specific ID of this meetup item.

73
00:03:16,000 --> 00:03:19,000
Again, here, programmatically,

74
00:03:19,000 --> 00:03:22,000
we could also render a link and construct the link path

75
00:03:22,000 --> 00:03:24,000
dynamically as an alternative.

76
00:03:25,000 --> 00:03:28,000
But with that, if we now save this,

77
00:03:28,000 --> 00:03:29,000
and we reload,

78
00:03:29,000 --> 00:03:30,000
if I click show details,

79
00:03:30,000 --> 00:03:34,000
we get an error because we have no content for this page,

80
00:03:34,000 --> 00:03:37,000
but actually we see the URL was changed correctly

81
00:03:37,000 --> 00:03:39,000
and the only missing thing indeed now

82
00:03:39,000 --> 00:03:43,000
is the content on this meetup detail page.

83
00:03:43,000 --> 00:03:45,000
And that's therefore, what we're going to add next.