In the last section we had a discussion about how the text input interaction interacts with our component 2
level state. 3
We're going to continue now by spinning out this text input as a reusable component. 4
So the reason that we're going to do this is having to recreate our text and put every time with obviously 5
what is probably getting that being a lot of styling on here right we're going to add a lot of styling 6
to this thing just to make it look nice. 7
And so I think that creating this as a reusable component would save us a lot of time considering that 8
we might want to reuse this text input in the future. 9
So that's our goal. 10
We want to create a reusable input to serve as our text input. 11
Let's take a look at a diagram really quick just to remember exactly what we want this thing to look 12
like. 13
So we want to have the text input in here. 14
Kind of off to the right hand side. 15
So the user should be able to tap to the right hand side here and enter some amount of text by default 16
we should have a placeholder. 17
So some placeholder text and then on the left hand side we should have the option to add in a label 18
of sorts. 19
So this is not the value over here as is supposed to be able to tell the user hey please enter an email 20
over here to the right hand side. 21
So let's give this a shot. 22
We will place this reuseable input or is reusable component in the same location as all of our other 23
reusable components which is the common directory. 24
So we're going to add a new file and for a reusable text input we're just going to simply call it input 25
so input. 26
J.S.. 27
And then inside if we're going to place our usual or usual boilerplate so import re-act from react will 28
import a couple of helpers from re-act native text input of the tag and a text tag. 29
And then we'll define the component self. 30
I'm going to make this a functional component. 31
We'll talk about why in just a second. 32
And then finally we will do our export of input at the bottom because this is one of the files that 33
we are going to immediately imported export. 34
Kind of like that passed through from our index. 35
JS file I'm going to wrap input with the curly braces. 36
I'm not going to use the default keyword. 37
So now we'll flip over to index and we will leave out our little helper in here. 38
Export star from input. 39
So now any other file inside of our project can import the input tag from the index file inside of our 40
common directory. 41
Now inside the input components off we're going to place just a little bit of GSX in here. 42
And just to kind of get ourselves started and then we'll talk about exactly how we're going to design 43
this thing. 44
So I'm going to place just a little bit of standon GSX for now. 45
I'm going to return a view tag and then inside of there I'm going to add in a text tag. 46
So the purpose of this text tag right here is to serve as that label that's going to float off to the 47
left hand side. 48
So here is our markup right here. 49
I want to have some amount of Texas is going to float over to left until these are hey here's what you're 50
supposed to enter into this thing. 51
So since we want this to be a reusable component we're going to want to reconfigure or determine what 52
that label should be is or what that label should be. 53
Excuse me on the fly. 54
So what I mean by that is I want to pass in the label text as a prop to this component. 55
So I think with out we don't really need to beat around the bush here. 56
We can receive a prop from our props object and I'm going to just arbitrarily right now remember all 57
these names that we specify all the ones we create. 58
I'm just kind of making up on the fly here. 59
I'm going to say that we should call this thing with a label or prop and then whatever it text I pass 60
it as the label prop. 61
We should add it inside of this text component or the text tag right here. 62
So now by default if I use the input component somewhere I can pass an improv label and that label should 63
show up inside of it. 64
Cool. 65
So good enough start here. 66
Let's continue working on this in the next section.