Instructor: In the last section,
we created our CommentBox component
and turned it into a class-based component.
We're now going to continue by wiring up
a couple of event handlers to this thing,
and after that, we'll then get started on our tests.
Now the first thing I wanna do
is create a new piece of state tied to this component,
and that piece of state is going to manage
the textarea right here.
So we're going to turn this into a controlled input.
To get started, I'll initialize my state object at the top
by writing out state equals,
and then we'll call the piece of state that's going to exist
for the value of this textarea right here.
We'll call it simply comment.
And since it's going to eventually be a string,
I'll default it to be an empty string, like so.
Next up, I'll make sure that I sign
this piece of state right here to the textarea component.
So I'm going to say value equals this.state.comment.
Now once we establish that, and save the file,
if we flip back over, and wait for the refresh,
we can then try to enter some text into the textarea.
Any second, there we go.
And of course I can't actually type anything inside of here
because we've declared the value of the text area,
but we've not allowed that element to have its value updated
at any point in time.
So I'm gonna make sure that I also attach an event handler
to this textarea.
So I'll say that anytime someone enters some text
into this thing, we'll fire off the onChange event.
So I'll say onChange,
and I'm going to create a new method inside this component
that I will call this.handleChange.
So I'll make sure that I define that method
inside the CommentBox by writing out handleChange.
We'll define this as a bound arrow function, like so.
So this arrow function will be called with the event object
that represents the user typing in that text area.
So I will receive that event object,
and then inside of handleChange, I'll call setState
to update the value of comment.
So this.setState, comment is event.target.value, like so.
All right, so now if we save this, and flip back over,
I'll wait for the refresh to kick in,
and you'll notice that we are back
to being able to enter some text into the text input.
Very good.
Now the second thing I wanna take care of very quickly here
is also wire up a form submit handler
to the form element right here as well.
Right now, we don't have anything to really do
with the comment that the user entered.
However, you'll recall that we had said
that anytime a user enters a comment right here
and clicks on this button,
we want to make sure that the text inside the textarea
gets cleared out, or kind of delete it.
And as a matter of fact, we had originally said
that that was one of the things
that we actually want to test inside of our application.
So that was right here on the CommentBox.
We had said when the user enters some input
and clicks on submit, that textarea should get emptied out.
So that's definitely one of our goals.
So on my form element, I'll add on a onSubmit event handler.
And anytime that submit event occurs,
we'll call a callback function that will call,
how about simply handleSubmit.
I think that's reasonable.
And then we'll define handleSubmit
inside of our component as well.
Now just like before, this event handler
is going to be called with an event object.
This is a HTML form right here,
and we want to make sure that this form
does not try to submit itself.
So the first thing that we'll do inside this event handler
is call event.preventDefault,
and that'll keep our page from attempting to reload.
Then, maybe right here or somewhere,
we're going to eventually want to make sure
we call an action creator
and save the comment that got entered by the user.
So we don't have any Redux wired up
to our application just yet.
So we're not gonna take care of that just right now,
but at least we can attempt to empty out that text area,
and we can do so by calling this.setState.
And then we'll set comment to be an empty string.
So that will cause the text area to empty itself out.
And then I'm gonna put a little space in here,
just to make sure that it's clear
that we still have to do the step right here.
And you know what, why not?
Let's put a little to-do note on there as well.
Okay, so now we'll do another quick test inside the browser
for this as well.
If I flip back over to my application.
Any second now, there we go.
I should be able to enter in some text,
click on submit comment, the page does not reload.
So we've prevented that default behavior,
and you'll notice that the text area
gets emptied out as well.
So this is looking pretty good.
Let's continue in the next section,
and we're gonna start writing some tests
around our comment box.
So quick break, and I'll see you in just a minute.