1
00:00:02,250 --> 00:00:03,310
Were you successful?

2
00:00:03,350 --> 00:00:04,710
Let's do it together.

3
00:00:04,710 --> 00:00:11,390
Let's create a new component here in goal input by importing React from React

4
00:00:11,500 --> 00:00:14,040
and then here, I'll name this goal input

5
00:00:14,040 --> 00:00:20,610
and I just like this constant syntax here, you could use function goal input to create your functional

6
00:00:20,610 --> 00:00:28,120
component, that would be fine too. Then here, I'll export the default goal input and now here, we need to

7
00:00:28,120 --> 00:00:31,030
return something and that something is in the end

8
00:00:31,030 --> 00:00:33,700
this view with the text input and the button.

9
00:00:34,090 --> 00:00:42,650
So let me grab that entire view, return it here between brackets so that this is written across multiple

10
00:00:42,650 --> 00:00:50,110
lines and nicely formatted and of course, we now need to again import stuff from React Native because

11
00:00:50,110 --> 00:00:55,840
we're using a couple of components from React Native, we are using the view component, we are using the text

12
00:00:55,840 --> 00:01:00,460
input component, we are using the button component and I also want to use the stylesheet component to

13
00:01:00,460 --> 00:01:02,270
set up my stylesheet object.

14
00:01:02,470 --> 00:01:10,510
So for that, let's add styles here with Stylesheet.create, pass an object to that Stylesheet.create method

15
00:01:11,140 --> 00:01:16,840
and of course take the styles from the app.js file, that would be the input container and the input, so

16
00:01:16,840 --> 00:01:21,540
cut both so that only the screen remains here and back in goal input,

17
00:01:21,730 --> 00:01:28,510
I'll add both here to my stylesheet so that this should work again. What won't work right now is that

18
00:01:28,510 --> 00:01:37,840
when we tap the button, that we add this because here, we are not having the state

19
00:01:37,870 --> 00:01:42,790
in goal input and when I tap the button, I actually want to do something in app.js.

20
00:01:42,910 --> 00:01:49,480
So first of all, we need to split the state. The entered goal should not be managed in app.js but it

21
00:01:49,480 --> 00:01:54,040
should be managed in goal input because that's where we have the text input in the end which is where

22
00:01:54,040 --> 00:02:01,360
the user does enter the goal. So let's add useState import here in goal input and then add our state

23
00:02:01,360 --> 00:02:08,950
management logic here with entered goal and set entered goal which we get from useState which we initialized

24
00:02:08,950 --> 00:02:14,650
with an empty string, let's add it here to goal input and from the app.js file, I'll also take the goal

25
00:02:14,650 --> 00:02:18,780
input handler, cut it from there and add it to goal input here,

26
00:02:18,820 --> 00:02:24,910
so this function in a function which we connect to onChangeText and now with that, fetching the user

27
00:02:24,910 --> 00:02:26,490
input should work again.

28
00:02:26,740 --> 00:02:32,660
Now for the button, when we press this, I want to trigger a function in app.js, I want to trigger the add

29
00:02:32,680 --> 00:02:38,360
goal handler and that function should stay here because I need to manage the list here because the app.js

30
00:02:38,560 --> 00:02:44,350
file is the only component which will have access to the goal input and the FlatList where we output

31
00:02:44,350 --> 00:02:52,950
the goals and speaking of that, we can already import goal inputs there in app.js from components

32
00:02:52,950 --> 00:03:02,010
goal input and add goal input as a component here above the FlatList but again, now we need to be able

33
00:03:02,010 --> 00:03:06,790
to find out when a button is pressed in this component and in React,

34
00:03:06,790 --> 00:03:14,740
you do that by passing the function which the child component should execute eventually as a prop to

35
00:03:14,740 --> 00:03:16,150
the child component.

36
00:03:16,150 --> 00:03:20,850
So here, we could add onAddGoal, that name is totally up to you,

37
00:03:20,860 --> 00:03:22,230
it's a prop you define

38
00:03:22,840 --> 00:03:25,990
and this points at add goal handler.

39
00:03:26,030 --> 00:03:32,980
This alone won't do anything but onAddGoal will now be received as a prop inside of goal input and

40
00:03:32,980 --> 00:03:37,520
it will point at a function, which means we can execute it as a function there.

41
00:03:37,540 --> 00:03:41,550
So in goal input, there on press,

42
00:03:41,950 --> 00:03:45,990
I can simply point at prop.onAddGoal, right?

43
00:03:46,000 --> 00:03:51,370
Because onAddGoal is that prop name I'm setting up here in the app.js file, that is received inside

44
00:03:51,370 --> 00:03:57,430
of goal input on the props object we're getting in every functional component and onAddGoal points

45
00:03:57,430 --> 00:04:00,200
at a function, so we can pass it to onPress

46
00:04:00,330 --> 00:04:05,630
so that onPress or React Native therefore knows that it should call this function when we press the

47
00:04:05,630 --> 00:04:06,470
button,

48
00:04:06,550 --> 00:04:09,430
that's how you do this in React Native.

49
00:04:09,430 --> 00:04:17,150
Still we'd have an issue because in add goal handler, I'm referring to the entered goal and that previously

50
00:04:17,170 --> 00:04:19,670
was managed in here but isn't anymore,

51
00:04:19,750 --> 00:04:25,540
we managed the entered goal which is the text input entered by the user in goal input now and not in

52
00:04:25,550 --> 00:04:26,340
app.js.

53
00:04:26,950 --> 00:04:32,620
So add goal handler should actually now receive an argument which is the goal title or whatever you want

54
00:04:32,620 --> 00:04:33,160
to name it,

55
00:04:33,190 --> 00:04:37,530
this name is up to you and that's what we store as a value here.

56
00:04:37,540 --> 00:04:47,700
Now we have to make sure that we forward this argument when on add goal gets executed in the goal input.

57
00:04:48,870 --> 00:04:55,350
So that happens here on a press and there we just point at this to also set up an argument which should

58
00:04:55,350 --> 00:04:58,410
eventually be passed along, we get two options,

59
00:04:58,410 --> 00:05:02,620
option one is that we set up an anonymous arrow function here.

60
00:05:02,640 --> 00:05:08,250
Now this arrow function will be executed eventually and therefore now we can add parentheses here because

61
00:05:08,250 --> 00:05:09,930
this will now not get executed

62
00:05:09,960 --> 00:05:16,050
when this gets rendered first, instead this arrow function will be registered as a to be executed function

63
00:05:16,050 --> 00:05:17,730
for onPress

64
00:05:17,730 --> 00:05:25,230
and now here in onAddGoal, we can forward the entered goal for example, that would work or alternatively,

65
00:05:25,290 --> 00:05:30,690
we don't use this anonymous arrow function approach and hence we can't add parentheses here but then

66
00:05:30,690 --> 00:05:38,790
we can use another Javascript feature, on functions we can call bind to preconfigure some arguments

67
00:05:39,120 --> 00:05:43,560
which should eventually be passed along when this function gets executed.

68
00:05:43,560 --> 00:05:47,190
The first argument is always to what the this keyword should refer.

69
00:05:47,190 --> 00:05:52,680
This doesn't matter for us here, so we can just write this but the second argument here or all other

70
00:05:52,680 --> 00:05:58,440
arguments thereafter actually will be the arguments received by this function when it is called and

71
00:05:58,440 --> 00:06:00,270
it is called up on a button press.

72
00:06:00,270 --> 00:06:06,210
So these are now the arguments which are forwarded to the onAddGoal function which in the end is just

73
00:06:06,210 --> 00:06:10,600
our add goal handler function and there, we need the goal title,

74
00:06:10,620 --> 00:06:12,080
so we need to forward this,

75
00:06:12,120 --> 00:06:17,740
so therefore here, I can now set up entered goal as a to be forwarded argument and

76
00:06:17,940 --> 00:06:20,760
that's normal vanilla Javascript syntax here.

77
00:06:21,850 --> 00:06:24,740
And now with this, it's getting rendered,

78
00:06:24,740 --> 00:06:25,920
that's looking good

79
00:06:26,090 --> 00:06:31,340
and if I enter learn React Native, still getting output here. So that all works

80
00:06:31,340 --> 00:06:36,770
but now we split this app into multiple components which is what you typically do in React apps and

81
00:06:36,770 --> 00:06:42,740
React Native apps just like you do it in React for web apps because it keeps your components leaner,

82
00:06:42,800 --> 00:06:46,550
more focused and your code more organized and easier to understand.