1 00:00:02,000 --> 00:00:04,000 So we learned about head and, typically, 2 00:00:04,000 --> 00:00:07,000 you wanna set up your head content 3 00:00:07,000 --> 00:00:12,000 in every page and also in every if branch inside of a page. 4 00:00:12,000 --> 00:00:15,000 Because you have very specific titles and contents 5 00:00:15,000 --> 00:00:17,000 for those different scenarios. 6 00:00:18,000 --> 00:00:21,000 Now, here in the slug page, for example, 7 00:00:21,000 --> 00:00:24,000 we definitely want to set our own title, 8 00:00:24,000 --> 00:00:27,000 and our own description, but maybe we wanna use 9 00:00:27,000 --> 00:00:29,000 the same title and description 10 00:00:29,000 --> 00:00:32,000 for all the different if cases then. 11 00:00:32,000 --> 00:00:36,000 So, we want to reuse that and not copy it manually 12 00:00:36,000 --> 00:00:38,000 into all those different cases. 13 00:00:38,000 --> 00:00:41,000 We could copy it but that's, of course, annoying. 14 00:00:41,000 --> 00:00:43,000 Now, reusing here is simple, 15 00:00:43,000 --> 00:00:46,000 we don't need any special Next.js concept. 16 00:00:46,000 --> 00:00:50,000 We can use a standard React.js approach. 17 00:00:50,000 --> 00:00:52,000 Instead of copy and pasting it, 18 00:00:52,000 --> 00:00:56,000 we cut it from down there, and we set it up once right 19 00:00:56,000 --> 00:01:00,000 at the beginning of this component render function. 20 00:01:00,000 --> 00:01:03,000 So, here before I have my first if check, 21 00:01:03,000 --> 00:01:06,000 so before we render something the first time, 22 00:01:06,000 --> 00:01:11,000 so to say, I create a new constant pageHeadData, 23 00:01:11,000 --> 00:01:12,000 or whatever you want to name it. 24 00:01:12,000 --> 00:01:16,000 And that contains my head section. 25 00:01:16,000 --> 00:01:19,000 Now, since I rely on numMonth and numYear here 26 00:01:19,000 --> 00:01:22,000 we might want to extract this first. 27 00:01:23,000 --> 00:01:27,000 So, I'll cut that here and move this 28 00:01:28,000 --> 00:01:32,000 in front of this pageHeadData part here. 29 00:01:32,000 --> 00:01:35,000 And then, we can just include pageHeadData 30 00:01:35,000 --> 00:01:38,000 in all our return statements. 31 00:01:38,000 --> 00:01:42,000 So for example, here, I then wrap this into a fragment 32 00:01:42,000 --> 00:01:46,000 because I now want to add an adjacent JSX element. 33 00:01:46,000 --> 00:01:51,000 I wanna also include my pageHeadData 34 00:01:51,000 --> 00:01:54,000 and output the content of this constant dynamically 35 00:01:54,000 --> 00:01:58,000 in this returned JSX code and the content 36 00:01:58,000 --> 00:02:02,000 of this constant, of course, is this JSX code. 37 00:02:02,000 --> 00:02:05,000 And we can now do this in all our return statements. 38 00:02:05,000 --> 00:02:10,000 So, also here, and here, and also 39 00:02:10,000 --> 00:02:13,000 in the final return statement here. 40 00:02:13,000 --> 00:02:15,000 So, that would be a standard React way 41 00:02:15,000 --> 00:02:18,000 of reusing some logic and if we do that, 42 00:02:18,000 --> 00:02:20,000 if I reload, I get an error 43 00:02:20,000 --> 00:02:24,000 that I cannot read property 0 of undefined. 44 00:02:24,000 --> 00:02:29,000 And the problem is that I'm accessing my filtered data here 45 00:02:29,000 --> 00:02:33,000 and the filtered data might be empty, of course, 46 00:02:33,000 --> 00:02:36,000 or it actually will be when the page renders the first time 47 00:02:36,000 --> 00:02:39,000 because I explained that use router works such 48 00:02:39,000 --> 00:02:43,000 that it runs when the page was first rendered 49 00:02:43,000 --> 00:02:47,000 and if it doesn't have the path parameter values, 50 00:02:47,000 --> 00:02:49,000 at this point, it then runs again 51 00:02:49,000 --> 00:02:51,000 and has access to them thereafter 52 00:02:51,000 --> 00:02:52,000 but not at the beginning. 53 00:02:52,000 --> 00:02:55,000 And therefore, actually, I want to move 54 00:02:55,000 --> 00:03:00,000 that filtered data part after the if loaded events part 55 00:03:00,000 --> 00:03:05,000 that was correct, and I want to set up my pageHeadData there 56 00:03:05,000 --> 00:03:10,000 after therefore, so below here, 57 00:03:10,000 --> 00:03:13,000 but I will remove const here, 58 00:03:13,000 --> 00:03:17,000 and instead create pageHeadData as a variable here 59 00:03:17,000 --> 00:03:21,000 and just assign a different content at the beginning. 60 00:03:21,000 --> 00:03:24,000 So, here it still holds the head element 61 00:03:24,000 --> 00:03:26,000 but I'll have a different description. 62 00:03:26,000 --> 00:03:31,000 So, I'll copy the title and my meta content here. 63 00:03:31,000 --> 00:03:35,000 But the description here is a list 64 00:03:36,000 --> 00:03:39,000 of filtered events, something like this. 65 00:03:42,000 --> 00:03:45,000 So, now, we changed the pageHeadData 66 00:03:45,000 --> 00:03:47,000 inside of this component function, 67 00:03:47,000 --> 00:03:50,000 depending on whether we have data or not. 68 00:03:50,000 --> 00:03:53,000 And, with that, if we save this and reload, 69 00:03:53,000 --> 00:03:57,000 this does load and now, if I inspected the page source here, 70 00:03:57,000 --> 00:03:59,000 we see that we do have that title 71 00:03:59,000 --> 00:04:01,000 and that we do have that description here. 72 00:04:03,000 --> 00:04:05,000 So, that's how we can reuse 73 00:04:05,000 --> 00:04:08,000 the head data inside of a component, 74 00:04:08,000 --> 00:04:11,000 if we have different return statements 75 00:04:11,000 --> 00:04:14,000 and therefore different pieces of JSX code 76 00:04:14,000 --> 00:04:16,000 that might be rendered by that component. 77 00:04:17,000 --> 00:04:20,000 But that's not the only way of reuse that which we have.