In the last section we created our new reusable input component. 2
The whole purpose of this input component is just to wrap a text and put and make it look nice or by 3
default that text input has absolutely zero styling. 4
And so I don't want to have to add in the styling. 5
Every single time I want to use the text input. 6
So inside our component now will place or text input and then immediately start to add in some styling 7
here as well. 8
So I'll place my text input and I expect to have to give it a lot of different properties so I'll get 9
myself a little space to add in some props here. 10
We'll add in to start a hardcoded style of height 20 and a width of 100 just like we had before. 11
So maybe just before we start working on the styling too much let's focus on making sure that we can 12
use this input inside of our loggin form. 13
So specifically what I'm talking about here is we've got a little of a challenge ahead of us are text 14
input that we create inside of the log in form. 15
Remember this is the primitive component right here. 16
Had that entire system with state and onchange callback and the value in blah blah blah blah. 17
Kind of great stuff. 18
So we need to make sure that when we replace this text input right here with the input that we just 19
created you know the reusable version of it we need to make sure that our component also respects these 20
value in onchange text properties as well. 21
So it is not as bad as it might sound. 22
Trust me let's do the refactor and see how it works out. 23
The first thing I'm going to do is I don't realize that I don't really want the text input from the 24
re-act native library inside of my log in form anymore. 25
I want to replace it with our homegrown version our re-usable component version. 26
So I'm going to take out that import statement because we don't need re-act need of any more inside 27
this file right now. 28
And instead we will import the input tag that we just created and then I will replace the text input 29
with the input. 30
So now this is our component right here. 31
This is our component through and through. 32
We already added in the style tag to the text input inside of our component so we'll take this one out 33
for now. 34
But we also we are going to leave in the props of value in onchange text. 35
So all we have to do to make sure this thing works correctly. 36
You know make sure that the state of that text input is still reflected on the log and form state. 37
We'd just have to make sure that the we pass the props of value in onchange text to the text input inside 38
of our component. 39
So we will flip over to our input right here. 40
We will receive the value and onchange text props. 41
And then we're going to pass them directly into the text input. 42
So Value is value. 43
And onchange text is on. 44
Change text so we pause here for a second. 45
And I want to acknowledge yes this last step probably seemed a little bit weird a little bit strange 46
but it. 47
I promise you it makes more sense. 48
You might think if it seems confusing our log in form is responsible for figuring out what the text 49
input state is right like what the actual fields text is what its value is. 50
So any single time that the user types inside that field we want to invoke this federal function. 51
Right. 52
Like that's the goal. 53
So we are passing that federal function as a prop down into the input we created. 54
We were passing it as a prop to the impot we created. 55
So now in our input we are receiving that Propp So we're receiving the onchange tax Propp and we're 56
just passing it right along to the text input and this text input right here is the primitive version 57
of the input. 58
It is the thing that's actually receiving text from the user. 59
I feel like if there's probably one really confusing part about this in my opinion it's the fact that 60
I chose a component name of input right here. 61
If it makes more sense you might think of this comput instead is like field or something like that. 62
You know anything that kind of separates it in meaning from this text input. 63
OK so enough lecturing about that. 64
The last thing we have to do is work on the styling for the rest of this component right here and maybe 65
for that let's just do a quick test to make sure it still work inside the simulator so I can click in 66
here. 67
Yep looks good. 68
And yeah I can still type stuff in here. 69
You'll notice that there is a little bit of white margin up here as well right now that we didn't have 70
before. 71
That's being caused by the text tag. 72
We're not passing a label to it right now. 73
So it is taking out of some arbitrary whitespace up there. 74
So we'll make sure that we will want to make sure that we also pass in a label from the log in form 75
as well at some point. 76
OK let's take a quick break and then come back and finish up the styling on this entire input element 77
.