Were you successful?
Let's do it together.
Let's create a new component here in goal input by importing React from React
and then here, I'll name this goal input
and I just like this constant syntax here, you could use function goal input to create your functional
component, that would be fine too. Then here, I'll export the default goal input and now here, we need to
return something and that something is in the end
this view with the text input and the button.
So let me grab that entire view, return it here between brackets so that this is written across multiple
lines and nicely formatted and of course, we now need to again import stuff from React Native because
we're using a couple of components from React Native, we are using the view component, we are using the text
input component, we are using the button component and I also want to use the stylesheet component to
set up my stylesheet object.
So for that, let's add styles here with Stylesheet.create, pass an object to that Stylesheet.create method
and of course take the styles from the app.js file, that would be the input container and the input, so
cut both so that only the screen remains here and back in goal input,
I'll add both here to my stylesheet so that this should work again. What won't work right now is that
when we tap the button, that we add this because here, we are not having the state
in goal input and when I tap the button, I actually want to do something in app.js.
So first of all, we need to split the state. The entered goal should not be managed in app.js but it
should be managed in goal input because that's where we have the text input in the end which is where
the user does enter the goal. So let's add useState import here in goal input and then add our state
management logic here with entered goal and set entered goal which we get from useState which we initialized
with an empty string, let's add it here to goal input and from the app.js file, I'll also take the goal
input handler, cut it from there and add it to goal input here,
so this function in a function which we connect to onChangeText and now with that, fetching the user
input should work again.
Now for the button, when we press this, I want to trigger a function in app.js, I want to trigger the add
goal handler and that function should stay here because I need to manage the list here because the app.js
file is the only component which will have access to the goal input and the FlatList where we output
the goals and speaking of that, we can already import goal inputs there in app.js from components
goal input and add goal input as a component here above the FlatList but again, now we need to be able
to find out when a button is pressed in this component and in React,
you do that by passing the function which the child component should execute eventually as a prop to
the child component.
So here, we could add onAddGoal, that name is totally up to you,
it's a prop you define
and this points at add goal handler.
This alone won't do anything but onAddGoal will now be received as a prop inside of goal input and
it will point at a function, which means we can execute it as a function there.
So in goal input, there on press,
I can simply point at prop.onAddGoal, right?
Because onAddGoal is that prop name I'm setting up here in the app.js file, that is received inside
of goal input on the props object we're getting in every functional component and onAddGoal points
at a function, so we can pass it to onPress
so that onPress or React Native therefore knows that it should call this function when we press the
button,
that's how you do this in React Native.
Still we'd have an issue because in add goal handler, I'm referring to the entered goal and that previously
was managed in here but isn't anymore,
we managed the entered goal which is the text input entered by the user in goal input now and not in
app.js.
So add goal handler should actually now receive an argument which is the goal title or whatever you want
to name it,
this name is up to you and that's what we store as a value here.
Now we have to make sure that we forward this argument when on add goal gets executed in the goal input.
So that happens here on a press and there we just point at this to also set up an argument which should
eventually be passed along, we get two options,
option one is that we set up an anonymous arrow function here.
Now this arrow function will be executed eventually and therefore now we can add parentheses here because
this will now not get executed
when this gets rendered first, instead this arrow function will be registered as a to be executed function
for onPress
and now here in onAddGoal, we can forward the entered goal for example, that would work or alternatively,
we don't use this anonymous arrow function approach and hence we can't add parentheses here but then
we can use another Javascript feature, on functions we can call bind to preconfigure some arguments
which should eventually be passed along when this function gets executed.
The first argument is always to what the this keyword should refer.
This doesn't matter for us here, so we can just write this but the second argument here or all other
arguments thereafter actually will be the arguments received by this function when it is called and
it is called up on a button press.
So these are now the arguments which are forwarded to the onAddGoal function which in the end is just
our add goal handler function and there, we need the goal title,
so we need to forward this,
so therefore here, I can now set up entered goal as a to be forwarded argument and
that's normal vanilla Javascript syntax here.
And now with this, it's getting rendered,
that's looking good
and if I enter learn React Native, still getting output here. So that all works
but now we split this app into multiple components which is what you typically do in React apps and
React Native apps just like you do it in React for web apps because it keeps your components leaner,
more focused and your code more organized and easier to understand.