All right guys. 1
In the last lesson, you saw how we can handle simple events such as clicking on a button or hovering 2
over it. 3
Now in this lesson I want to talk about some more complex events such as the events that arise from 4
within a form. 5
Now when you're creating web apps, it's pretty common that you're going to be creating forms for log 6
in, for registration, for contact 7
and there's some peculiarities. In order to really understand how forms work 8
we need to incorporate our knowledge about setting state and using state. 9
So in this lesson I want to tackle how you can get the user inputs from the input element and how you 10
can use the submit button in order to use the information that the user is typed in. Just as we had the 11
onClick event that we could add to our submit button, 12
we also have a event on the inputs called onChange and this is triggered every single time the value 13
of the input changes, 14
so when the user types something new inside. So we can create a function called handleChange which is 15
going to be triggered every time the input is changed. 16
Let's go ahead and log Changed and let's pass the name of this function over to our onChange. 17
Now when I start typing inside this input namely changing it, you'll see that my handle change gets called 18
every time I add a new letter. 19
Now this is not very useful because what we're more interested in is actually what the user is typed 20
rather than the fact that they have started typing. 21
The other thing to know is that when your input element triggers the function that's stored in the on 22
Change, 23
it also passes over an object. And that object corresponds to the event that triggered this onChange. 24
And we can log various things related to that event. 25
For example, we can log event.target.value and remember that the event is the event which triggered 26
the onChange, 27
the target is the element that triggered this event and the value or any of the other properties on 28
the target 29
are the things that correspond to the value of some of these attributes. 30
For example in addition to event.target.value, we can also get hold of the placeholder of the element 31
that triggered the event or the type of the element that triggered the event. 32
And if I hit save and start typing, you'll see that every time I enter a new letter the first thing that's 33
printed is the value. 34
The second is my place holder. 35
And the third is the type. 36
And this happens every time I type a new letter. 37
So let's get rid of these other two and focus on our event.target.value. 38
If I start typing, you can see that every single time I type a new letter handleChange is being triggered 39
passing over the event that triggered the change 40
and I'm logging the current value which corresponds to the text that exists in this particular input. 41
Now what if I wanted to use this value that the user is typed somewhere else inside my app or my component? 42
So if I wanted to change my hello, 43
so instead of saying hello 44
it actually corresponds to what's being typed in the input. 45
Well to do that I of course need to have state in my app. 46
So let's go ahead and create a new constant 47
and then let's destructure our output four our useState to hold two things. 48
One is going to be the name and the second is going to be the function setName which is going to help 49
me update this name constant. 50
I'm going to set this to use state and when I call this function I'm going to provide a starting value 51
which is actually just going to be nothing, an empty string. 52
And remember to add useState to the import when you're using this function. Now I can use this constant 53
name inside my H1. And I'm going to add it right at the end 54
after the hello. So opening up a set of curly braces, inserting the value of the variable name inside 55
here at the end and now what I'm gonna do is whenever a handle change gets called, I'm going to call 56
setName and I'm gonna pass over the value of event.target.value. 57
So now when I start writing, you can see that I'm updating the state of that name variable and then it's 58
being added to my 59
as I type. Now there's just one thing to remember about forms. In HTML, the elements themselves are 60
responsible for handling their own state. 61
For example you might remember that there's a attribute called value. 62
And this corresponds to what is currently inside the input. 63
Now in HTML this value is normally handled by the input property and it sets it to whatever is being 64
typed in here. 65
But in React what you should really do is set the value to the variable that comes from the event. 66
target.value. 67
In our case 68
that would of course be this thing 69
name. This way we have one single source of truth which is the state of name. 70
So whenever we use it inside other components or when we have it as the value of the inputs, they're 71
all corresponding to the same thing and they're all going to match up. 72
And this in React lingo is called a controlled component. 73
And I highly recommend you to take a look at this link which I'll add in the course resources and have 74
a brief read just of this paragraph where they talk about this concept of controlled components. And 75
don't worry if you're seeing this documentation in 2019 when I'm recording this, they're still showing 76
class components. But in the future hopefully they'll update this to show hooks instead. 77
But the concept is the same. 78
We have to add the value that comes from our state as the value attributes of our inputs and keeping 79
a single source of truth. 80
And that's basically all there is to this idea of controlled components. 81
Now here's a challenge for you. 82
What if I wanted to be able to type in a name and then only when I click on the Submit button does it 83
get added to my ? 84
See if you can use what you've learned in this lesson and the last lesson to complete this challenge. 85
Just as a hint, you're going to need to detect events in the submit button. 86
You're probably going to need another variable to keep track of state and you might have to also have 87
a mess around with your code until you can get it to work. 88
Pause a video now, give it a go and then come back and we'll walk through the answer together. 89
All right. 90
So the first thing we need to do is we're probably going to need to add a onClick listener to our submit 91
button. 92
And when this button gets clicked, we're going to trigger a function which I'll call handleClick. 93
Now handleClick doesn't need to look at the event data, 94
it doesn't really care. 95
It just need to be triggered when the user presses on this button. 96
So that's what we're going to pass in here, 97
handleClick. 98
And when that button is clicked, what do we want to happen? 99
Well it's only in that moment when we want to take the value of the event.target.value that came 100
from the input and then put it inside the . 101
So instead of using the name variable which is always going to be updated as we change the value of 102
this input, instead maybe we can use a different variable. Maybe we can call it headingText. And we can 103
keep track of the state of headingText by using our usestate hook. 104
And we'll have another method called setHeading and we'll set that equal to useState and the initial 105
value is also going to be an empty string. 106
We don't want anything to show up after the word hello. 107
But, when the submit button is clicked and we want to handle that click well then we want to set our 108
heading to the value of our name. 109
So we're using this name variable and setting it as the heading text. 110
So a quick note here is that when you're writing a function you can simply just use the name of the 111
variable. 112
You don't need the curly braces around it. 113
And in fact if you do add the curly braces, then you're going to set your heading text to be a Javascript 114
object rather than just a value, like so. 115
So that's the thing to be careful about. 116
And if in doubt, you can always use the log statement to log what { name } looks like which 117
is an object versus what just the name property is which is just the actual value. 118
Once we've set the heading then the value of name at this moment in time is going to become the heading 119
text and then the heading text should display in our . 120
And if we check it out and click submit then you can see this is how it's meant to work. Did you manage 121
to get it right? 122
If not head back to your code and see if you can fix it and get it to work. 123
Now the very last thing I want to show you regarding forms is normally we're used to putting our inputs 124
and our submit buttons inside an HTML form component 125
and so it would look something like this. And maybe you would have the button type being set to submit 126
so that if you had multiple buttons it's only this one that would trigger the submission of the form. 127
But even if I didn't have this type submit, notice what happens when I have a button inside a form component 128
and I click on it. 129
So if I go ahead and type my name in here, I'm expecting it to show up in the , but if I click on submit 130
right now see how it added it to the but then it quickly refreshed the app. And this is the default 131
behavior of form components in HTML. They refresh in order to submit, make a post request or make 132
a get request and refreshes the page. 133
And what happens is when you click on the button inside the form especially if this is the submit button, 134
then it actually triggers a method on the form called onSubmit. 135
So you can in fact set this to the handler or whatever it is you decide to do when that button gets 136
clicked 137
and this has the same effect. When the button gets clicked inside the form it triggers the onSubmit 138
of the form and calls the function that you have designated. 139
So now we haven't actually improved anything, 140
it still refreshes. But we can now address it inside the handleClick function. 141
So we know that we get an event passed whenever one of these event handlers get triggered. 142
So we can catch that event inside this function and right at the end of the function once we've done 143
everything it is that we want to do, we can get the event to call preventDefault. 144
And this is a method that basically prevents the default next behavior of the event which in our case 145
if it's coming from the form's onClick here, that is going to be refreshing the page. 146
So now if I go ahead and type in my name and click submit, you'll notice that it gets added to the heading 147
without the default behavior of the submission. 148
So that's just a quick note that comes in really handy when you're working with forms in React. In the 149
next lesson 150
I want to take you on a brief tour and compare using classes vs. hooks to manage states. 151
We saw classes being mentioned in the React documentation. 152
So I want to demystify the concept and talk about why React is moving to hooks instead. 153
And after that, we're going to learn how to manage more complex states including how to save JavaScript 154
objects using the useState hook. 155
So for all of that and more, I'll see you there.