Original subtitles

So we learned about head and, typically,

you wanna set up your head content

in every page and also in every if branch inside of a page.

Because you have very specific titles and contents

for those different scenarios.

Now, here in the slug page, for example,

we definitely want to set our own title,

and our own description, but maybe we wanna use

the same title and description

for all the different if cases then.

So, we want to reuse that and not copy it manually

into all those different cases.

We could copy it but that's, of course, annoying.

Now, reusing here is simple,

we don't need any special Next.js concept.

We can use a standard React.js approach.

Instead of copy and pasting it,

we cut it from down there, and we set it up once right

at the beginning of this component render function.

So, here before I have my first if check,

so before we render something the first time,

so to say, I create a new constant pageHeadData,

or whatever you want to name it.

And that contains my head section.

Now, since I rely on numMonth and numYear here

we might want to extract this first.

So, I'll cut that here and move this

in front of this pageHeadData part here.

And then, we can just include pageHeadData

in all our return statements.

So for example, here, I then wrap this into a fragment

because I now want to add an adjacent JSX element.

I wanna also include my pageHeadData

and output the content of this constant dynamically

in this returned JSX code and the content

of this constant, of course, is this JSX code.

And we can now do this in all our return statements.

So, also here, and here, and also

in the final return statement here.

So, that would be a standard React way

of reusing some logic and if we do that,

if I reload, I get an error

that I cannot read property 0 of undefined.

And the problem is that I'm accessing my filtered data here

and the filtered data might be empty, of course,

or it actually will be when the page renders the first time

because I explained that use router works such

that it runs when the page was first rendered

and if it doesn't have the path parameter values,

at this point, it then runs again

and has access to them thereafter

but not at the beginning.

And therefore, actually, I want to move

that filtered data part after the if loaded events part

that was correct, and I want to set up my pageHeadData there

after therefore, so below here,

but I will remove const here,

and instead create pageHeadData as a variable here

and just assign a different content at the beginning.

So, here it still holds the head element

but I'll have a different description.

So, I'll copy the title and my meta content here.

But the description here is a list

of filtered events, something like this.

So, now, we changed the pageHeadData

inside of this component function,

depending on whether we have data or not.

And, with that, if we save this and reload,

this does load and now, if I inspected the page source here,

we see that we do have that title

and that we do have that description here.

So, that's how we can reuse

the head data inside of a component,

if we have different return statements

and therefore different pieces of JSX code

that might be rendered by that component.

But that's not the only way of reuse that which we have.