1 00:00:02,340 --> 00:00:06,210 So there was a lot of talking, a lot of stuff being done, 2 00:00:06,210 --> 00:00:10,680 now it's really time to make this button work and let us add a goal here, 3 00:00:10,680 --> 00:00:11,780 right 4 00:00:11,850 --> 00:00:17,040 and for that we need to find out what the user entered and thereafter, of course listen to a tap on the 5 00:00:17,040 --> 00:00:23,850 button and then add the entered goal to an array of goals which we have to manage somewhere, which we 6 00:00:23,850 --> 00:00:26,460 then can output down there in this bottom view, 7 00:00:26,460 --> 00:00:26,850 right, 8 00:00:26,850 --> 00:00:29,630 that's what we need to do. Now in this course, 9 00:00:29,670 --> 00:00:35,600 I will use functional components only with the React hooks feature which is relatively new, 10 00:00:35,640 --> 00:00:41,550 so in case you don't know React hooks yet, definitely learn about them first, for example in my React Complete 11 00:00:41,550 --> 00:00:42,120 Guide, 12 00:00:42,120 --> 00:00:47,250 I thoroughly cover them but attached you also find some other resources that get you started 13 00:00:47,250 --> 00:00:54,000 with React hooks because we'll need React hooks to for example get the user input. 14 00:00:54,000 --> 00:01:00,280 We used the useState hook for that which we import from React, not from React Native but from React, it's 15 00:01:00,300 --> 00:01:02,070 a core React feature 16 00:01:02,220 --> 00:01:10,620 and then here in this functional component, in this app component, we can get the entered goal and also 17 00:01:10,620 --> 00:01:19,110 get the set entered goal function to update the state with the help of useState and by default, we 18 00:01:19,110 --> 00:01:24,840 have an initial state which is an empty string because the user hasn't entered anything at the beginning. 19 00:01:24,870 --> 00:01:27,330 Now we can bind this to the text input, 20 00:01:27,330 --> 00:01:33,870 that means when the user types a character, we want to update our state and save the entered text in the 21 00:01:33,870 --> 00:01:39,240 state here which we can then access through entered goal and we'll pass the entered goal back into the 22 00:01:39,240 --> 00:01:46,680 text input. That's this two-way binding, it's a so-called controlled component which you also know from React 23 00:01:46,680 --> 00:01:50,380 for web with normal HTML input elements. 24 00:01:50,430 --> 00:01:57,340 So here we can listen to onChangeText, a prop provided by text input which takes a function that will 25 00:01:57,430 --> 00:01:59,930 execute for every keystroke. 26 00:01:59,970 --> 00:02:04,660 Now we could provide an inline function here but we can also set up a separate function to have a bit 27 00:02:04,660 --> 00:02:09,850 of a cleaner code and you can have a function in a function and we need to have it in here, so we can 28 00:02:09,850 --> 00:02:17,770 use our state or set entered goal function here, by simply adding a new function here, 29 00:02:18,990 --> 00:02:26,400 goal input handler could be a name, the name is up to you though. In that function, we'll get the entered 30 00:02:26,580 --> 00:02:34,170 text automatically, that will be passed in by React or by React Native here and we can then call set 31 00:02:34,200 --> 00:02:40,770 entered goal and pass the entered text as a value because the entered text here will already be a string 32 00:02:41,100 --> 00:02:48,630 because we connect goal input handler to onChangeText by simply pointing at it here. Now that's important, 33 00:02:48,900 --> 00:02:54,300 don't add parentheses down there because this would execute this function when this code gets parsed, 34 00:02:54,330 --> 00:02:59,880 so when the UI gets rendered for the first time. You don't want to execute this immediately though, you 35 00:02:59,880 --> 00:03:05,940 want to execute it on every keystroke and therefore, you just take the name of the function, you pass that name 36 00:03:05,940 --> 00:03:12,210 of the function to onChangeText and that effectively tells React Native, hey that's the function I 37 00:03:12,210 --> 00:03:19,260 should execute for every keystroke, so don't add parentheses here so that this can run on every keystroke. 38 00:03:20,010 --> 00:03:25,170 Now instead of this function syntax, you by the way also can use a different syntax which is the one 39 00:03:25,170 --> 00:03:31,080 I will use throughout the course, where you create a constant with that name here and then the value 40 00:03:31,080 --> 00:03:38,190 of that constant after equals sign is simply a function using that arrow function syntax, so then this 41 00:03:38,180 --> 00:03:44,490 here is your argument list and this is the function body. That's normal Javascript syntax, it is supported 42 00:03:44,490 --> 00:03:49,470 by the Javascript code React Native is able to run and therefore this is the syntax I will use, you 43 00:03:49,470 --> 00:03:56,820 connect it to onChangeText exactly in the same way as before. Okay, so now we have this function connected, 44 00:03:57,090 --> 00:04:01,050 we update our state with whatever the user entered on every keystroke, 45 00:04:01,050 --> 00:04:07,800 now we also have to pass that text back into the text input, so that it's displayed there correctly by 46 00:04:07,800 --> 00:04:14,190 simply binding the value property to entered goal, so to our state which will change with every keystroke. 47 00:04:14,870 --> 00:04:20,400 And with that, we're getting access to the user input because it will now always be stored in an entered 48 00:04:20,400 --> 00:04:27,010 goal. Now when the user presses the button, we want to use that entered goal, so for that I'll add another 49 00:04:27,040 --> 00:04:33,730 function here, add goal handler and that's just a naming convention I'm using for these functions here, 50 00:04:33,940 --> 00:04:39,310 you can name them whatever you want, whatever you are used to from your React apps, in the end the function 51 00:04:39,310 --> 00:04:45,820 name should simply describe what's about to happen and that here will handle a press on that button which 52 00:04:45,820 --> 00:04:52,920 in the end will then add a goal. Here the function won't take any arguments but in the function body, 53 00:04:52,920 --> 00:04:58,150 I want to add my entered goal to a list of goals and we have no list yet, 54 00:04:58,230 --> 00:05:04,830 so for now what I do here is console log, which is supported in React Native, entered goal so that we 55 00:05:04,830 --> 00:05:10,710 at least see that this was saved correctly and that this function is executed. For this to execute, we 56 00:05:10,710 --> 00:05:16,680 need to connect it to the button though, there we can add the onPress prop and point at the add goal 57 00:05:16,680 --> 00:05:24,160 handler, again without parentheses so that this doesn't execute immediately but only when a press happens. 58 00:05:24,540 --> 00:05:33,720 And now let's save all of that and let's go back and let's maybe enter learn React Native and the good 59 00:05:33,720 --> 00:05:41,560 thing is you can use your real keyboard here and press add and you should see here in your terminal this 60 00:05:41,560 --> 00:05:48,130 log, you'll also see this by the way in your expo dev tools here in the browser tab. There, 61 00:05:48,150 --> 00:05:52,670 If you click on one of the connected devices, the one where you just click the button in my case, the 62 00:05:52,670 --> 00:05:57,730 Android device, then there at the bottom you'll also see Learn React Native. 63 00:05:57,730 --> 00:06:05,350 And of course it also works on iOS, learn all about React Native, if we enter this here and click 64 00:06:05,350 --> 00:06:12,840 add, then we also see that being logged here and also see that in the expo dev tools, if we click on the 65 00:06:12,840 --> 00:06:16,810 iPhone at the very bottom, we see this log. Okay 66 00:06:16,910 --> 00:06:21,530 so we're getting the user input, we're storing it, we're console logging it, of course we don't want to 67 00:06:21,530 --> 00:06:27,530 console log it, we want to output it below our input here instead, we want of a list of our goals below 68 00:06:27,530 --> 00:06:35,000 this input area. So for that, we need that second view here which should output our list of items. 69 00:06:35,030 --> 00:06:40,250 So here between the opening and closing tags, I want to output all the elements we added, all the goals 70 00:06:40,280 --> 00:06:45,740 we added. For that we first of all need to manage our goals and we can set up another state for that 71 00:06:46,400 --> 00:06:51,780 which initially is an empty array, hence I pass an empty array as a value to useState 72 00:06:51,860 --> 00:06:58,010 and there we have our course goals and a set course goals function. 73 00:06:58,010 --> 00:07:03,070 Now these names are always up to you but they should describe what's in your state and how you can update 74 00:07:03,070 --> 00:07:04,230 it. 75 00:07:04,240 --> 00:07:10,330 So now here when we add a goal, I want to update my course goals to add the new goal and for that, I can call 76 00:07:10,330 --> 00:07:20,840 set course goals and now set course goals to a new array where I take my old course goals and add a 77 00:07:20,840 --> 00:07:21,740 new one. 78 00:07:21,740 --> 00:07:25,100 Now this is the syntax you might not know, that's the so-called spread operator, 79 00:07:25,100 --> 00:07:30,470 it's a Javascript feature which takes an existing array and course goals is an array, 80 00:07:30,470 --> 00:07:38,030 it's our current state snapshot before the update and pulls out all the elements from that array and 81 00:07:38,030 --> 00:07:43,280 then adds them here to a new array which is why I have the surrounding square brackets, without this surrounding 82 00:07:43,280 --> 00:07:43,840 square brackets 83 00:07:43,850 --> 00:07:49,310 this would not work but now we create a new array and we add all the elements of the old array and now 84 00:07:49,310 --> 00:07:51,100 we can also add a new element. 85 00:07:51,110 --> 00:07:53,370 So here, I add a comma to add an extra element 86 00:07:53,390 --> 00:08:00,310 after all the elements I'm pulling out here and the element I add here is my entered goal of course. 87 00:08:00,320 --> 00:08:04,680 So now we update our list of goals with the old list of goals, 88 00:08:04,730 --> 00:08:10,250 initially an empty list but then this will grow over time because we then also add a new goal 89 00:08:10,250 --> 00:08:17,380 when we press that button. Now a tiny side note, when working with set course goals, course goals here is 90 00:08:17,380 --> 00:08:21,410 our previous state and the way React updates the state, 91 00:08:21,460 --> 00:08:28,210 this should always be your most current state snapshot but it's not 100% guaranteed, to have that 92 00:08:28,360 --> 00:08:32,750 100% guarantee, when you update your state based on the old state, 93 00:08:32,920 --> 00:08:39,250 you can use the function form of this set function where you don't pass the value of your new 94 00:08:39,250 --> 00:08:39,950 state here 95 00:08:40,060 --> 00:08:46,870 but instead you pass it in a function, typically an anonymous function where you get your current state 96 00:08:46,990 --> 00:08:53,850 or current goals, so your current state snapshot and then you return your updated value, 97 00:08:53,860 --> 00:09:01,240 so here I return my updated array with that inline arrow function syntax where if you only have one 98 00:09:01,240 --> 00:09:06,640 expression, you can omit the curly braces and the return statement and just enter the value you want 99 00:09:06,640 --> 00:09:08,650 to return and it will be returned and 100 00:09:08,680 --> 00:09:13,310 that's all normal Javascript here, nothing React Native specific. 101 00:09:13,450 --> 00:09:21,070 So here, I then take my current goals and then add my entered goal. This syntax is a bit better, the other 102 00:09:21,070 --> 00:09:26,170 syntax would have worked as well but this is guaranteed to always work because React Native will here 103 00:09:26,200 --> 00:09:33,520 always go ahead and give you the guarantee, the latest state snapshot before it then applies your state 104 00:09:33,550 --> 00:09:35,050 change here. 105 00:09:35,260 --> 00:09:42,410 Now that's all nice, we'll now have a list, an array of goals managed here. How can we now output this though?