1 00:00:00,910 --> 00:00:06,420 In the last section we had a discussion about how the text input interaction interacts with our component 2 00:00:06,420 --> 00:00:08,210 level state. 3 00:00:08,460 --> 00:00:13,490 We're going to continue now by spinning out this text input as a reusable component. 4 00:00:13,500 --> 00:00:18,870 So the reason that we're going to do this is having to recreate our text and put every time with obviously 5 00:00:18,870 --> 00:00:23,550 what is probably getting that being a lot of styling on here right we're going to add a lot of styling 6 00:00:23,550 --> 00:00:25,480 to this thing just to make it look nice. 7 00:00:25,680 --> 00:00:30,660 And so I think that creating this as a reusable component would save us a lot of time considering that 8 00:00:30,660 --> 00:00:33,520 we might want to reuse this text input in the future. 9 00:00:33,540 --> 00:00:34,310 So that's our goal. 10 00:00:34,320 --> 00:00:39,190 We want to create a reusable input to serve as our text input. 11 00:00:40,110 --> 00:00:44,490 Let's take a look at a diagram really quick just to remember exactly what we want this thing to look 12 00:00:44,490 --> 00:00:45,260 like. 13 00:00:45,630 --> 00:00:48,090 So we want to have the text input in here. 14 00:00:48,150 --> 00:00:49,790 Kind of off to the right hand side. 15 00:00:49,800 --> 00:00:54,810 So the user should be able to tap to the right hand side here and enter some amount of text by default 16 00:00:54,840 --> 00:00:56,070 we should have a placeholder. 17 00:00:56,100 --> 00:01:01,680 So some placeholder text and then on the left hand side we should have the option to add in a label 18 00:01:01,680 --> 00:01:02,310 of sorts. 19 00:01:02,310 --> 00:01:07,800 So this is not the value over here as is supposed to be able to tell the user hey please enter an email 20 00:01:07,800 --> 00:01:09,560 over here to the right hand side. 21 00:01:09,980 --> 00:01:12,200 So let's give this a shot. 22 00:01:12,510 --> 00:01:19,590 We will place this reuseable input or is reusable component in the same location as all of our other 23 00:01:19,590 --> 00:01:22,360 reusable components which is the common directory. 24 00:01:22,620 --> 00:01:29,680 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 00:01:30,780 --> 00:01:31,610 so input. 26 00:01:31,650 --> 00:01:34,170 J.S.. 27 00:01:34,390 --> 00:01:42,610 And then inside if we're going to place our usual or usual boilerplate so import re-act from react will 28 00:01:42,670 --> 00:01:50,390 import a couple of helpers from re-act native text input of the tag and a text tag. 29 00:01:53,480 --> 00:01:57,170 And then we'll define the component self. 30 00:01:57,480 --> 00:01:59,220 I'm going to make this a functional component. 31 00:01:59,220 --> 00:02:01,040 We'll talk about why in just a second. 32 00:02:01,140 --> 00:02:07,080 And then finally we will do our export of input at the bottom because this is one of the files that 33 00:02:07,080 --> 00:02:10,010 we are going to immediately imported export. 34 00:02:10,020 --> 00:02:12,200 Kind of like that passed through from our index. 35 00:02:12,210 --> 00:02:15,960 JS file I'm going to wrap input with the curly braces. 36 00:02:15,960 --> 00:02:18,420 I'm not going to use the default keyword. 37 00:02:18,840 --> 00:02:23,430 So now we'll flip over to index and we will leave out our little helper in here. 38 00:02:23,760 --> 00:02:27,240 Export star from input. 39 00:02:27,630 --> 00:02:34,170 So now any other file inside of our project can import the input tag from the index file inside of our 40 00:02:34,170 --> 00:02:35,440 common directory. 41 00:02:37,280 --> 00:02:42,120 Now inside the input components off we're going to place just a little bit of GSX in here. 42 00:02:42,350 --> 00:02:46,700 And just to kind of get ourselves started and then we'll talk about exactly how we're going to design 43 00:02:46,700 --> 00:02:47,550 this thing. 44 00:02:47,930 --> 00:02:51,450 So I'm going to place just a little bit of standon GSX for now. 45 00:02:51,740 --> 00:02:59,170 I'm going to return a view tag and then inside of there I'm going to add in a text tag. 46 00:02:59,540 --> 00:03:04,100 So the purpose of this text tag right here is to serve as that label that's going to float off to the 47 00:03:04,100 --> 00:03:04,910 left hand side. 48 00:03:04,910 --> 00:03:06,540 So here is our markup right here. 49 00:03:06,590 --> 00:03:11,660 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 00:03:11,660 --> 00:03:13,160 supposed to enter into this thing. 51 00:03:14,810 --> 00:03:21,530 So since we want this to be a reusable component we're going to want to reconfigure or determine what 52 00:03:21,530 --> 00:03:24,810 that label should be is or what that label should be. 53 00:03:24,830 --> 00:03:26,410 Excuse me on the fly. 54 00:03:26,510 --> 00:03:33,530 So what I mean by that is I want to pass in the label text as a prop to this component. 55 00:03:33,530 --> 00:03:36,490 So I think with out we don't really need to beat around the bush here. 56 00:03:36,530 --> 00:03:43,040 We can receive a prop from our props object and I'm going to just arbitrarily right now remember all 57 00:03:43,040 --> 00:03:46,450 these names that we specify all the ones we create. 58 00:03:46,490 --> 00:03:48,600 I'm just kind of making up on the fly here. 59 00:03:48,830 --> 00:03:54,590 I'm going to say that we should call this thing with a label or prop and then whatever it text I pass 60 00:03:54,590 --> 00:03:55,970 it as the label prop. 61 00:03:56,000 --> 00:04:01,040 We should add it inside of this text component or the text tag right here. 62 00:04:01,070 --> 00:04:07,460 So now by default if I use the input component somewhere I can pass an improv label and that label should 63 00:04:07,460 --> 00:04:09,040 show up inside of it. 64 00:04:09,220 --> 00:04:09,500 Cool. 65 00:04:09,500 --> 00:04:11,100 So good enough start here. 66 00:04:11,120 --> 00:04:13,860 Let's continue working on this in the next section.