Original subtitles

There's just two more components we need to create.

Very quickly we're gonna get through these rather fast because they're really the same as two components

we put together before we're gonna make common create and comment list.

Let's get to it.

Well first start with come and create back in said my editor for The react project.

I'm gonna make a new file inside the RC directory called comment create dot J.S. inside of here will

import react right away and then create a new component and export it like so.

And right now I'll just return once again an empty div.

Now let's think about what comment create really needs to do come and create is going to represent this

form right here.

So user is going to type in some content for the comment and then click on submit.

The expectation is that we should take whatever content the user enters and make a post request off

to our comment service.

Now one thing I want to point out in particular is that whenever we create a comment we have to know

the I.D. of the post that we are associating that comment with.

So inside of our comment create component we need to know the post that this comment is going to be

associated with.

So long story short whenever our posts list or a post inside a post list is going to create a comment

create component we need to pass down the idea of the post that it's going to be associated with.

That's the long and short of it.

So inside of comment create we're going to assume that this thing is going to receive a prop so we're

going to receive some props right here.

That's going to contain something like post I.D. or something very similar.

I don't really expect to receive any other props inside this thing.

So I got a D structure out just this post.

I do value OK so now I can make you supposed idea just yet but I just want to talk about it right away.

Just make sure it's really clear.

Yeah we needed to know the idea that post that we're gonna associate this comment with so we can start

to put together the rest of this component to get started.

Let's work on a little bit of mock markup.

I'm going to expand this div inside there.

We're going to want a form element because this thing is all about showing a form that the user is going

to enter some text into inside that will place a div with a class name of form dash group inside that

div will do an input and right above that let's do a label as well on the label.

I'll give it some text like about new comments on the input.

Let's add in a class name there as well.

I'll do form dash control let in some event listeners and whatnot and just a moment first right outside

of that closing div that we've got right there.

I'm going to add in a button that says submit and I'll give it a class name as well.

B10 18 dash primary gets is a good start.

Now we need to make sure that we've got a piece of state that's gonna track whatever value a user has

inside this input.

We need to make sure we've got an event handler on the form itself to watch for a summit event.

We need to make sure that we've got a function that's actually going to make a post request off to our

comments micros service and attempt to persist.

The given comment so let's get to it let's first add in the use state hook we're going to create a new

piece of state that's going to track whatever value the user has inside that input.

So we'll say how about content and set content it's going to come from your state and we'll give it

a default value of empty string and we can set up some event handlers and value setters on the input

itself.

So I'll say that this thing's value is going to be equal to content and it's going to have an on change

event listener whenever user changes this input.

We're going to receive an event which once again will abbreviate just as E and we'll use the things

target value property to update our content piece of state.

We'll say that content e target value

that looks good.

Now let's work on the form itself.

We're going to add in an on submit listener once again anyone this thing gets submitted we'll call a

function of a call simply on submit let's define that function right away.

So on submit there's gonna be an async function because we probably need to make a request inside of

your because this is a form submission.

Once again we're going to receive that even object and call prevent default on it.

And so now finally right here is where we're going to want to take our content and the Post I.D. and

use them to make a request off to our comments.

Micro.

Service.

So let's make sure that we import access at the top so we can actually make that request

and then inside of here we'll do and await axial start post it's gonna be a poster costs because we

want to create a new comment and then remember the path that we said that we're going to use for that

micros service.

We said that we were going to make a post request to posts slash the idea of the post we care about

slash comments and we're going to include a body of content.

Now we're going to have a string so inside of here we'll use a template string.

Notice I'm using the tactics and we'll say HDP call and slash slash local hosts.

And then remember our comments micros service is that port four thousand one will do slash posts and

we'll do some string templating here and put in our post I.D. which we discussed a little bit ago.

That's coming in as a prop flash comments and we'll make sure that we provide the actual content inside

the body the request that's inside this object right here provided as a second argument and we'll throw

our content inside their I should create a new comment and associate it with the given post right after

we make this request successfully.

We're gonna once again clear out the value of that input they're going to reset the inputs value back

to an empty string just to make sure it's clear to a user that hey your comment has been persisted right

after that.

I'll do a set content of empty string.

ALEX Good Now before we test this.

We need to make sure we actually show this component somewhere.

Remember we want to show that component inside of our post list every single post that we display needs

to have an instance of comment create displayed right underneath it.

So we'll go into post lists and find where we iterate over our list opposed to build out this list right

here so I will go back over to a post let's start J.S. I'm going to scroll up to the very top and I

will import most or see me comment create from comment create

will then find where we've mapped over all those posts here's the mapping statement right here that

this is where we display the title to post and as we just saw in our mockup we want to display that

form right underneath it.

So right after that div or see me right after the H 3 My mistake.

We wanted to be inside the did.

So it's got that card body class applied to it.

We're going to display our comment rate component and we'll make sure that we give it its required property

which is the post I.D. We'll say post I.D. and we've got access to the post I.D. be up this host variable

right here so pass in post dot I.D..

That should be it.

Let's save this or flip back over and once again do a quick test so I can now see my common creation

form I'll enter in a comment and then submit it's with my network request tab open I can see that that

comment was created successfully.

All right so looks pretty good.

Now the last thing we have to do here is just make sure we put together the comment list components

so quick pause work on that component finished it up in just a moment.