So let's now work on the HTML,
the JSX code of an event item.
Now here you should follow along closely
because I will also provide finished styles
to you in a second.
And those styles will only do their job correctly
if you have the same HTML code.
So therefore make sure you follow along closely.
Of course you can always use the code snap shots
you find attached to the last lecture of every module
to compare your code to mine
incase you have some deviations somewhere.
And therefore lets get started.
I want to have an image here.
An image element in every list item
where we display the image of a chosen event
or of a rendered event here.
So we'll need to set up a source here and some alt text
and we'll work on the data in a second
for the moment let's just create the HTML code.
And then below that I wanna have a
below that image.
In there I wanna have two more s
and in the first in here,
I start with a title, an h2 element here,
where we output the title of that event.
Then below that another
where I want to add a time element
which is a regular HTML element
where the time or the date should be output
and also then below this another
where the address should be output.
For this we can use the address HTML element
which is also a regular element
where we will see and render the address.
With that we can move on to the other main
which we added side by side to this first .
As you're in this ,
I in the end wanna have a clickable link.
So for this we can use the link component
which we need to import,
we import link from next link as you learned,
so that we can sent up a link that takes us to another page.
So here we'll then need to set up the URL,
the path to which it should navigate,
we'll do it as later.
And then as a text it could say explore event.
That's the general mark up,
the general HTML code which I wanna use.
Now of course its lacking the concrete data though.
So for this, we're getting props
because that data should be passed in from outside
and I'll again use object destructuring
to pull out that data from the props.
And I do expect that we get a title,
that we get an image,
that we get the dates and a location and an ID.
Of course we could also just expect one event prop
and pull out all the data from there
but I expect multiple props here.
You can of course expect whichever props you want.
So now we got that and now here for example,
we can output the title constant here
which we get from props.
Now for date and address,
I just don't wanna output the data like this
instead I want to transform it a little bit first.
For example I want to set up a human readable date
and for this I'll trade a new date object
and pass date to it
because date as we're getting it here
we'll have this format which is kind of human readable
but not really pretty.
But thankfully that is a format
which we can pass to the date constructor
to turn it in a Java Scripted date object
and on such a date object
we can then call toLocaleDateString
and then transform this into a human readable date string.
The first argument here is to locale what we wanna use,
and I will use en-US
and the second argument then is an object
where we can figure how the different parts
of the date should be output.
For example that a day should be output in numeric format
month should be output in a long form
and year should be output in numeric format as well.
Now if you wanna learn more
about this toLocaleDateString method
you can of course search for mdn toLocaleDateString
and find the kind of official docx on that
and here you learn on how that works
and which other options you would have
when it comes to configuring the output.
The configuration I chose here
should work really well though
and therefore now here instead of date,
I'll put the human readable date like this.
Now for the address I also want to format this
and I'll create a formatted address where I use the location
so this location proper getting, this one,
and then on that I call replace
and I replace comma wide space with backwards slash 'n'.
Now all the locations, have such a comma in there
to separate discrete from the postal code and city
and I'm simply replacing that with backwards slash 'n'
which adds a line break.
So that's what I'm doing here.
And therefore now we can use this forward method
address down there.
Now we'll need to add some styling
for this line break to have an effect
but we're going to do that later as well.
Now we also have an image of course
which we wanna set up here.
And the image is just a string in the dummy data
which is a path to an image which we added locally here.
So we have that images slash image name path
in our public folder.
That's why you should make sure
that this image path and name matches your path
you added your imaging.
But now that we do have this link here,
we now can bind source to forward slash plus image.
Image is our prop here and image will be a string like this
and I'm just adding a forward slash at the beginning.
And since all the content in the public folder
will be served statically by Next.js,
this request to slash images slash image name
will succeed.
We don't need to add public at the beginning here
so it's not slash public slash
but just slash because it's the content of the public folder
which will be served statically.
So public should be excluded,
because we don't need to dive into that folder first
it's the content of the folder
which is being served by Next.js.
So we can navigate
as if we already were inside of that folder.
Now for the alt text algorithm was my title again.
With we're almost done
but we also wanna wire up that link address
that link target here.
And for this I wanna construct a link
which takes this ID into account.
I'll add a new constant here and named is exploreLink
of course this name is up to you,
and here I'll use a template literal and start with
/events/ and then inject something dynamic into this spring
I'll inject a the ID
the value which we get on the ID prop here.
So that exploreLink is a string that includes that ID
and then it's just exploring
which I bind here as a value to ref.
And then with all that done,
this component lacks styling but is generally ready to go.
So now in event list we need to pass all that data
which is expected by event item
we need to pass those props into event item here now.
So here I add the ID prop and pass in event.id.
I add the title prop and pass in event.title.
We add the location prop and pass in event.location
and so on.
It will be the same for the date, with event.date
and the same for the image with event.image.
And dozens for mapping here
and since we are creating a list of items
we should also set the key prop
which is not expected by our component
but by react whenever you output a list dynamically
and here we pass in event ideas.
Well since instead will be a unique identifier
per list item.
And now with all of that,
we can use this EventList component
in our starting page component.
So in the home page component.
For this we import the EventList component
from going up one level diving into components, events,
event list and then here instead of just unorder list,
we can simply output event list like that.
And now last but not least,
we just need to make sure
that we passed in items to event list.
So here in the homepage component,
we start with the items props
and pass our featured events into EventList.
And if we now save all files
and reload I get an error numeric is not defined
the cause an event item
that should also be a string wrapped by quotes.
Now if I save this, now we have a large image here
and yeah.
If we scroll we see the data is there
but of course it's lacking styling
and that's the effort which we're going to work on next