So for this MeetupDetail page,
I'll add a new functional component inside
of that meetupId page,
the MeetupDetails component.
And I'll then export this as a default.
Oops, like this.
Not MeetupList.
Like this and then here we return the content
for the MeetupDetails page.
Now, here it's, of course, up to you
how you wanna display the details for a given item.
I will output a fragment,
which we need to import from react
so that we can have multiple adjacent JSX elements.
And I'll then start by outputting the image
of that meetup item
with some src and some alt text.
Now, of course, later we will actually get the concrete data
for a specific meetup item here.
At the moment, we don't really have any meetup data source.
We have this dummy array in the root index.js file
but it's only available in there
and whilst we could export this constant
and then also use it in the MeetupDetail page,
I will not do this here
because we're soon going to connect a real backend anyways.
And therefore, for the moment,
I'll just hard code some data in here
and I'll grab that data from the dummy data though,
so from this DUMMY_MEETUPS array
and I'll copy the image link here
and use that as a source.
And the alt text could be A First Meetup like this.
Then below that, I will add a h1 tag
where I say A First Meetup and then below that,
a paragraph with The meetup description.
And we can also add a address element here,
which is a default HTML element
where we have the address.
Like that.
That could be how we output the MeetupDetails,
for the moment, with some dummy data.
And if I add this here in the MeetupDetails component,
if we reload this MeetupDetails page,
this is what we see.
And that's okay but of course, not the final style
which I'd like to have.
I'd like to center all the text actually
and I would also like to shrink the image a little bit.
Now, for that, I haven't prepared any styles,
so we can just quickly add some styles together here
and for this, I'll actually add a brand new component
in the component's meetups folder,
which I'll name MeetupDetail,
like this and you don't have to create this component.
I just like to keep my page component files pretty lean
and outsource as much JSX code as possible
into standalone components.
But that is not something you have to do.
Nonetheless, I will do it here
and I'll copy that fragment
from the MeetupDetails page component here
and add it to the MeetupDetail single component.
And create that MeetupDetail component here.
And of course, also export MeetupDetail here
and return that JSX code here then like this.
And actually, accept props already
and expect that I get this data through props now
so that the data will be fetched in the page component later
and will then passed into this component,
which is then responsible
for actually presenting the content.
So here we then have props.image.
Here for alt, we could use props.title.
What we then also use here for the h1 tag, props.title.
And here for the address, that would be props.address
and here we have the description.
Props.description.
And on the MeetupDetails page component,
we can now output this MeetupDetail component
we just worked on.
And for this, of course,
import this MeetupDetail component up there.
And now we just need to pass that data,
which we expect in that component
through props into that MeetupDetail component.
So here we can then add the image property
and then use our dummy image link
or our dummy image content here for the moment.
Set the title prop.
First Meetup could be the title.
Set the address prop to Some Street 5, Some City
and last but not least, set the description prop
to this is a first meetup.
And then we can get rid of the fragment
and that JSX content in the page component
and just use the MeetupDetail component here.
Now, why am I doing that?
Again, just to keep the JSX code lean here
and now also for styling reasons.
We could have also imported a CSS file
in the page component.
This would work, it is a regular component after all.
But I like to keep my pages folder lean
and only have the page JS files in there.
Now, for the other components on the other hand,
it is quite common that we pair a JavaScript file
with a CSS file
and again, we could have done that
in the pages folder as well
but I wanna keep that folder leaner.
Here for the components folder,
it is more common to include these CSS files
and hence here I'll now also add
a MeetupDetail.module.css file.
The .module.css is important by the way.
We already used it all the time here silently so to say
because I provided all these components to you
but this actually unlocks a feature
called CSS modules.
It's a feature which you might know from standard React.
It allows you to scope CSS class styles
to a React component and it is supported out
of the box in NextJS projects.
If you name a CSS file like this,
ending with .module.css
and you then import it into your JavaScript file
in a certain way, which I'll show you in a second,
then the CSS styles defined in the CSS file
will be scoped to this component.
At least if you use CSS classes as selectors.
Now, that special way of importing
can bee seen in the other JavaScript files.
It looks like this.
We import classes or however you wanna name it
from the CSS file.
And that's a special way of importing,
which will be picked up by NextJS
and behind the scenes,
it will then transform the CSS classes
so that the class names are unique per component.
And that ensures that your styles can't spill over
to other components.
That's why I also wanted to show this approach here.
So now we can import classes from ./MeetupDetail.module.css
like this and now classes is a JavaScript object in the end
where any CSS classes you define in your CSS file
will be available as properties on this object.
And if you access them,
the values will be the transformed CSS files,
which are guaranteed to be unique.
And that allows you to use the same CSS class names
in different components without clashing with the styles.
And now we could replace Fragment here
with section and give that section a className
of classes.detail let's say like this.
And if we do that, we can now add a detail CSS class here
in the MeetupDetail.module.css file.
And the styles we define in there will then be applied
to this section
because it gets this transformed detail class
under the hood.
And that is a nice feature to have,
which is why I also wanted to show it to you.
Now, with that, we can, for example,
select the image, which is inside of that element
with the detail class, so this image.
We can select this
and then change its look, change its style.
For example, give it a width of 100%,
which ensures that it stays in the box
that is reserved for this page by the layout component.
We can also select the overall detail class again.
So the entire section with that class on it
and set text-align to center
so that all the text elements are centered.
And that could now be our MeetupDetail.
Of course, you can tweak it.
You can add more styles,
you can make sure that it looks the way you want it to look.
I don't wanna turn this into a CSS course.
I just wanted to show you this CSS modules feature
and show you this approach,
which you don't have to use but which I like to use
that I keep my page component files relatively lean,
especially regarding the JSX code
and I instead use embeddable standard React components
for the actual JSX code
and like in this case, for the styling.
And with that, we have our MeetupDetail page in place
and now we've got all these pages here which we need.
Now, with that, we can work
towards replacing that dummy data source,
our dummy array here in the root index.js file
with a real backend, with a real data source.