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.