So from the front end,
we wanna send requests
to our newly added comments API route.
And it's the new comments component
where I wanna start with this.
Here, we have the send comment handler,
and in there we get all the user input
and we then have some client side validation
which we shouldn't trust,
but which is still there.
And we then call on add comment on props
which should be a function,
where we pass an object with email name and text
And on add comment, then in the end is a function here
in the comments JSX file, this add comment handler
which has passed as a function
through the on add comment prop
on the new comment component.
And here we then receive that comments data
which should be sent as a request.
Now I actually do need to connect my
send comment handler to the form.
So here with on submit
I point at send comment handler to connect that.
And then in comments JS we wanna send a request.
So here again, we can use the fetch function for it is
and the route now is slash API slash
and then it's comments,
because of that comments folder
slash and then this file.
But of course, with a concrete value for the event ID.
Now that event ID is something
which we get through props here in the comments component.
It's a Indian passed in by this page
by this event ID page.
So this Real page, not the API route, but this Real page.
They're into comments.
I pass in this event prop which points
at the ID of the event we're loading here.
Hence in the comments JSX file,
we get this event ID prop
and that is what we should add as a concrete value
to the route here, to the path.
Then it should be a post request.
Hence we add this second argument to configure the request
and set the method to post
and the body then to our data.
And here I'll use JSON stringify to send my comment data,
which is this data package we get
from the new comment component.
Which contains email, name and text.
And here I'm using these property names,
email, name and text, and hence it's these property names
which you should be looking for in your API route,
Email, name, and text.
So that the data can be retrieved correctly.
Because I'm just forwarding that data
with my HTTP request to the API route.
Then I'll add these extra headers to clarify the
the content type I'm sending here,
application JSON and we should be good.
Now we can again wait for a response
and parse that
and then as a next step
thereafter get back some data
which you for example console log, like this.
With all that implemented,
if we save everything and go back
if I try to submit as empty form, I get an error here
because I have some built in client side validation.
If I disable this client side validation
if I go to the new comments JSX file,
and I comment out this code here,
and I submit this, it is submitted,
but now in the network tab,
if we opened that and submit this
we see that the request actually fails it's red
and it has this 422 status code.
Which we do send back from the API route,
if our service side validation fails.
And then that server side validation
unlike the client side application can't be tricked.
So it is good to add logic like this.
Nonetheless, I'll bring back that client side validation
because of course for the user experience,
it's better if we already validate the data
and show an error before we even send a request.
So with that back, let's now enter some valid data here.
Let's enter an email address and a name
and some texts, this is my comment and click submit.
And now this succeeds, we have the 201 status code.
And in the response we see
the message and this comment object
with the dummy ID, which was created on the backend.
We're also logging it into console here.
So this works and if we have a look at the server side log
so the terminal where we run npm run dev,
we also see that object here.
So that works and we do send that data.
Now last but not least before we then add some real logic
talking to a database to our API route,
let's also fetch comments in the comments JSX file
when we do show our comments.
Now for showing the comments
we have the toggle comments handler,
and that is executed whenever this button here is clicked.
And whenever we do show comments,
I want to load the comments
by sending a get request to these comments API route.
So I wanna trigger this part of this handler functioning.
And to achieve this we got various different ways.
We could go into this toggle comments handler function
for example, and here we changed the state
but this will not be processed instantly by React.
It will be scheduled.
And then the next line thereafter
the state will not be updated yet.
So here we could check if show comments is true
which means the current state is show comments.
Then the button was clicked and dysfunction executes again.
So the goal is to hide them now.
And therefore we could check if not show comments
which means to current status
that the comments are not shown,
then dysfunction executes
and the new state is that they will be shown.
So now we should fetch data
and that's something we could do.
Or alternatively, we use good old useEffect here
and also import that from React
and in here simply add
show comments as a dependency
and in the effect function
we then check if show comments is true
which means that comments are shown.
And if that is true, we wanna fetch the comments.
So then here we can send our request to
slash API slash comments slash event ID.
So this concrete event ID.
We don't need to configure it
because it will be a get request, not a post request.
So the default is fine.
And then we also get our data and parse that.
So that we have the real data here eventually
with which we can work.
Now once we got that data,
we wanna use the data to set the actual comments
which should be rendered here with help of comment list.
So for that we can manage another piece of state
with use state, a list of comments,
where I have my comments
and set comments to update them, like this.
And I wanna set comments once I get them.
So here in this then block
once we got a response, I'll set my comments.
And then the API route
will send back object with a comments key
which then contains this array of comments.
So when we work with that data
I wanna set comments equal to data dot comments,
to access that array of comments,
which is set in that response data package,
which has this comments key as we just saw.
That then sets that comments state
to those fetched comments.
And that means that we can then use them to render them.
So this comments state could then be passed to comment list.
Let's say through items prop, like this,
and now in comment list we need to work with this items prop
And of course you can name that prop differently.
In there I'm not expecting any props right now
but we should change this,
add the props parameter
and extract items from props.
And then we can use items to render
these list items dynamically.
So we just go through items
and map every item into a list item
with content like this.
So cut this and add it here
and get rid of these dummy list items down there.
And then here add a key on every list item
which should be item dot id
here as a text we wanna output item dot text
And for the address here, we wanna output item dot name.
So the name of the user who wrote to comment.
And with that we have our list items,
which should be rendered
and we can now check whether that works.
Let's reload this page
for a single event and click on show comments.
And we see the comments showing up there
and in the network tab,
we can also see the request there.
If I hide the comments
and I click show again they are fetched again.
And hence we see the request here
and we see that it carries the comments in the response.
I guess that's kind of obvious
because we all also a rendered them successfully here.
So it clearly works.
And these are the core tasks which I gave you solved.
We added the newsletter registration.
And now also those comments feature for storing comments
or for at least submitting the comments I guess
and for fetching the dummy comments.
Now it's not very realistic yet though
because we are only working with dummy data
and we're not storing the submitted comment anywhere.
Therefore in the next step,
let me show you an example of how we could talk
to a real database to store our data there
and to get our data from there.