WEBVTT 00:01.160 --> 00:01.700 Okay. 00:01.700 --> 00:08.720 In this video, I will show you how we can actually handle user input and will create a text input that 00:08.750 --> 00:14.620 user can type in something and we'll capture that input and store it in our state. 00:14.630 --> 00:20.360 So first thing first, I will do a little bit of cleanup here because it's, uh, looks very ugly here. 00:20.360 --> 00:25.610 So I will remove the styles we had here. 00:33.990 --> 00:35.880 And this is a much better. 00:35.880 --> 00:39.990 So what I can do now is I have a few things here. 00:39.990 --> 00:44.970 So instead of that button there, maybe I can move it here. 00:45.000 --> 00:50.340 What I can do is I can do a text input 00:53.730 --> 00:54.420 like this. 00:54.420 --> 00:58.770 And also I need to make sure that I import that from React Native. 00:58.800 --> 01:04.170 So I will do another one here, text input and then I will close it. 01:04.170 --> 01:10.170 So what, what we need to put inside the in text input is a few things. 01:10.200 --> 01:10.590 Actually. 01:10.590 --> 01:12.510 This can be a self-closing tag. 01:12.510 --> 01:14.850 We don't need to have it like this. 01:14.850 --> 01:17.550 And then we put a few things inside. 01:17.550 --> 01:20.640 So first thing will be value. 01:21.300 --> 01:25.020 Value we can actually use whatever we have here. 01:25.020 --> 01:27.810 So I can use a value name. 01:27.810 --> 01:29.850 We can also have a placeholder. 01:30.240 --> 01:36.040 We won't see it here because we will have a value from then, uh, this state. 01:36.040 --> 01:40.030 So I can say type in your name. 01:41.230 --> 01:45.220 So what I will have at the moment is I will have the value here. 01:45.220 --> 01:52.750 And you can see here I have two Christian, one is the text style and another one is the input. 01:53.920 --> 01:57.550 I can do a little bit of uh, style. 01:58.330 --> 02:02.140 And actually another way to do a styles is inline styles. 02:02.140 --> 02:03.970 You don't need to apply it here. 02:03.970 --> 02:07.000 You can apply a styles already here. 02:07.000 --> 02:08.920 So I could say height. 02:14.270 --> 02:20.630 Of 40, but that need to be in a double curly braces. 02:20.630 --> 02:23.150 The first one is to inject the. 02:23.510 --> 02:27.470 JavaScript inside these tags and the second one is the object itself. 02:27.470 --> 02:32.120 So I have a height and then 40 and then I can have more style scale. 02:32.120 --> 02:40.400 So for example, back background color and then I can say, um, red. 02:45.830 --> 02:48.740 So we have something ugly like this. 02:48.830 --> 02:52.580 And, uh, so this is the text input here. 02:52.580 --> 02:58.580 And I can actually, you can see wherever I click in this, the, the keyboard on the mobile device 02:58.580 --> 03:06.500 is open and I can type in so I can use this one or I could type in something here on my keyboard, on 03:06.500 --> 03:07.700 my computer. 03:07.700 --> 03:12.620 Normally on the mobile device will have this option here, A y. 03:12.620 --> 03:16.760 This is actually not changing because the way the react works. 03:16.760 --> 03:22.550 So basically what we have is we assign the value name from our state and name is Christian. 03:22.550 --> 03:27.290 So whatever we change something, it will come back to the initial value we have here. 03:27.290 --> 03:37.160 So what we also need to do here, we need to have on text, on change text, and then we can have a 03:37.580 --> 03:40.100 function too that will trigger. 03:40.100 --> 03:49.020 So what we can do is we can, uh, do an arrow function here so we can have it a function in the, in 03:49.020 --> 03:52.980 the, in this component or we can have it in inline here. 03:52.980 --> 03:54.270 It doesn't really matter. 03:54.270 --> 03:57.090 What we can do is we can do setname. 03:59.160 --> 04:02.370 And then we can do value of text. 04:05.100 --> 04:13.290 And then if I will type in something here, you can see both this and also my initial. 04:13.380 --> 04:19.590 I just pick a very bad color here, so remove them because it's really hard to see something. 04:19.590 --> 04:26.250 So I will remove this green there and then I can do margin bottom instead of. 04:32.160 --> 04:34.980 So it will be easier to to see. 04:36.210 --> 04:42.240 So what this is my this is my text here and this is my input. 04:42.240 --> 04:45.000 So if I will change the input here. 04:49.320 --> 04:56.910 You can see this one is changing because what I do is I change the state here and on change, text it, 04:56.910 --> 05:01.360 change the state, and this state is actually reflected back in the text input. 05:01.380 --> 05:07.310 So this is the way you can actually get the input from from a user. 05:07.320 --> 05:11.610 What's the other options for getting some inputs from a user? 05:11.610 --> 05:13.500 Another option will be a button. 05:14.550 --> 05:16.770 So it will be capital button. 05:19.070 --> 05:22.970 And then we also need to import. 05:25.000 --> 05:29.470 And then actually this can be self closing tag as well. 05:29.470 --> 05:39.430 And then what we can have here is we can have on press and that will be a function so we can do something 05:39.430 --> 05:46.030 when we press that button and then we can do, for example, alert, That will be another option to 05:46.030 --> 05:48.460 show you how actually react. 05:48.460 --> 05:51.010 Native is handling things in a different way. 05:51.010 --> 05:58.450 So alert is very intrusive on web, but it's actually very handy on mobile and you will see that in 05:58.450 --> 05:58.960 a second. 05:58.960 --> 06:06.130 So let's say you click the button. 06:07.120 --> 06:08.290 So. 06:13.440 --> 06:19.110 You click the button here and then when you also need to do text. 06:31.150 --> 06:36.730 And that's supposed to be a title, not a text. 06:38.620 --> 06:42.240 And you can see here I have a click me here. 06:42.250 --> 06:52.330 So what we can actually do is we can concatenate our string and then it's like instead of maybe you, 06:53.110 --> 06:55.960 what we can do is we can actually use our name. 06:55.960 --> 06:58.870 So name plus click the button. 07:01.530 --> 07:07.500 So if I will click it here, you can see Alert Christian, click the button. 07:07.500 --> 07:11.640 And this is styling for typical styling for mobile device. 07:11.640 --> 07:17.460 So it will be different on iOS, it will be different on Android, but it's more user friendly because 07:17.610 --> 07:20.880 mobile users already get used to that kind of pop up. 07:20.880 --> 07:24.210 So you can see you can have it something like this. 07:24.210 --> 07:30.900 So you can click the button and actually we can fit some variables into this alert as well. 07:30.900 --> 07:32.850 So if I will change this to. 07:34.610 --> 07:35.570 Someone. 07:37.550 --> 07:43.880 You can see someone click the button and this is the way you can actually handle user inputs. 07:43.910 --> 07:51.050 We can have a text input here that will actually use with our state and then we have a button and then 07:51.050 --> 07:52.270 we have a on press. 07:52.280 --> 07:53.870 So things like this. 07:53.990 --> 08:01.430 Making our application more interactive with the user and usually in the application you will have things 08:01.430 --> 08:01.880 like this. 08:01.880 --> 08:08.490 So either login or register or anything you would like to send to the database or create new record. 08:08.510 --> 08:13.340 You will also need to use this text input and button for sure.