In the last section and we started setting up our project by adding the search bar to the top of the 2
page we just have a simple form right now an input and a span that wraps a button. 3
And again the class names and kind of the team structure that we have here is coming from bootstraps 4
So again if you're curious about that at all you can go check out this draft documentation. 5
So we've got our input now. 6
We're now going to turn it into a controlled field. 7
Remember a controlled field is a form element where the value of the input is set by the state of our 8
component not the other way around. 9
So you know when someone clicks on the button right here we're not going to say oh you know hey what's 10
currently in the input right now. 11
We're going to say you know this state DOT blah blah blah. 12
We're going to say declaratively what the value of our input is not imperatively. 13
So to create a controlled component we need to set our state whenever the input is changed. 14
And don't forget that when I refer to state in here I'm referring to our component state just the component 15
level not the redux level state. 16
Two completely separate things. 17
So if you recall to set our state up we need to initialize it inside of our constructor. 18
So all right constructor profs. 19
And then we'll call super with props and then we initialize our state with this state equals term which 20
will be an empty string. 21
So we're going to say that the value of the input is going to be mapped to this state. 22
Term term being search short for like you know a search term and we're also going to default to just 23
be an empty string so that when the input first shows up it's going to be completely empty. 24
You know no content in there to start off with. 25
So now we have some initial state here we can go ahead and update the state over time using a change 26
handler on the input. 27
We're also going to add some other tags in here at the same time as we do this event handler. 28
So let's go ahead and get to it. 29
So first we're going to add a placeholder on here just the user knows you know what the heck this thing 30
is for what they're doing as is input. 31
So the placeholder will be get a five day forecast in your favorite cities. 32
Let's go with the period yeah let's go in and then we'll give it a class name of form dash control and 33
then so here's the next two properties of the parts that actually turn it into a controlled component 34
first will assign the value to it which will be this start state term. 35
So remember the inputs value is coming from this dot state DOT term and we'll say hey whenever someone 36
changes this thing. 37
So on Change run the function. 38
This dot on input change like so. 39
So we don't have this function right here defined yet. 40
Right we don't have anything in this component that says hey on input change. 41
So we need to go ahead and define that change handler we'll define it as a new function on our class 42
on input change and its first argument and here is going to be an event object. 43
Remember all Dom event handlers like on change or on click or on hover or you know on scroll What have 44
you. 45
They all come along with this event object right here. 46
And this is a reactor thing. 47
This is a you know all vanilla javascript thing. 48
We get to see that object here. 49
Let's go ahead and use that event object to just console log the value of the input. 50
Whenever someone types in there it's all right console log we then target that value. 51
And again you know this target of value is not a react thing it's just vanilla javascript vanilla aged 52
you know. 53
OK. 54
So I want to save this and just to make sure that we've got everything wired up correctly in here. 55
You know our change handler makes sure that we've got the value coming in correctly. 56
I'm going to go ahead and test it out in the browser so I'm going to refresh and you'll notice that 57
that class name that we added on here now makes it look pretty darn nice. 58
You know it connects up nicely with a submit button. 59
And we've also got our placeholder text in here as well. 60
Get the five day forecast in your favorite cities. 61
I guess I'm going to type something in here before I type something. 62
I want you to kind of imagine in your head you know what happens when I type. 63
Thinking back to when we previously set up a controlled component. 64
Right. 65
When we don't have something to update this start state DOT term the value of the input never actually 66
gets displayed. 67
So the value when we type in here is going to stay blank. 68
It's going to stay totally empty which is I know totally mind boggling how that could happen. 69
But just one of those things. 70
OK. 71
So I mean here let's start typing and we got our text. 72
Everyone's happy. 73
The value of the input comes from this dot state term. 74
We're not updating that value. 75
So it never appears that the text in here actually changes but the keypresses do occur so we do see 76
the console log. 77
So let's fix that problem by going ahead and setting our state whenever we enter some text in there 78
. 79
So we'll say this does set state term. 80
That's our you know term for holding the current search term is going to be given target value. 81
Okay. 82
So I mean to say this now will refresh and let's try typing again. 83
And oh my goodness we've got a big ole air here cannot read properties set state of undefined. 84
All right so what's happening here. 85
And we never into this for right. 86
Whenever we have set up a you know input like this in the past well when we last used an event handler 87
handler like this we wrapped the event handler inside of a fat arrow function. 88
This time around we're just saying hey whenever onchange is called Run this start on input change. 89
We're just doing it dysfunctionally just saying hey we're you change never something happens you're 90
just run this function. 91
OK. 92
The problem is that when we pass off any event handler like this and then call it the value of this 93
is not going to be our search component our search bar here is not going to be the re-asked components 94
going to be some mystery context. 95
If you're not really familiar with the concept of this in javascript no problem whatsoever. 96
All you need to know is that whenever we hand a callback function like this off and then the callback 97
reference is this. 98
This is going to have the in incorrect context it's going to have some mystery context. 99
So when we hand this off and then we type in the input and this runs we get the error message that says 100
hey you know this Scott said state I don't have set state that you know the method set stayed on here 101
because this is not the actual component here. 102
So to fix this we're going to use a different approach than what we had previously where we use the 103
arrow function. 104
You know like this which we had previously we're going to take a different approach this time around 105
and we're going to find the context of on input change. 106
So we do that by writing in our constructor. 107
This dot on input change equals this dot on input. 108
Change bind this. 109
So before we you know explain or walk through what's happening here let's give a shot in the browser 110
now. 111
So I can see this will refresh and then we'll type and you'll say see that we get our input up incorrectly 112
we got the crack in the log and no errors in here. 113
All right. 114
So looks like it's working now but you know why is it working right. 115
So this line right here says this which is our instance of search bar has a function called on input 116
change bind that function to this which is search bar and then replace on input change with this new 117
bound instance of this function. 118
So that's what's happened here it's saying take the existing function find it to this and then replace 119
the existing function with it. 120
So we're kind of like overwriting this local method on here. 121
OK. 122
So again if you're not really familiar with the concept of this and javascript no problem whatsoever 123
just remember rule of thumb that works probably 99 percent of the time. 124
If you're ever passing a callback around as a function like this and that callback has a reference to 125
this you need to bind with the context. 126
Luckily the error messages that you usually get from doing this incorrectly are tend to be pretty darn 127
clear. 128
You know in our case it said hey I don't know what sets it what the function set state is. 129
Well our component only has one reference to set state. 130
So this would have been a really easy bug to track down right. 131
We would have said oh you know this song said state that should be defined but oh me they forgot to 132
bind my context. 133
So if you ever run across that air where you say say an error message or it's like I don't know what 134
that function is. 135
Start thinking about context especially if it's in a callback like so. 136
All right so now that our callback here works properly. 137
Let's go ahead and continue in the next section.