So the add button here calls onAddGoal and that basically forwards the goal to app.js which is
exactly what we need
but what we also need to do is we need to make sure that when we add a new goal, the modal gets closed.
Now keep in mind that we in the end control the modal visibility from inside the app.js file because
there, we have the isAddMode state which we're changing when we click this button here, the add new goal
button for example
and this state value, isAddMode is forwarded to goal input where we then use it to control the visibility
of the modal.
So in order to make sure that the modal disappears, we simply have to change isAddMode again inside
of the app.js file because the new value will then automatically be forwarded to goal input.
So all we have to do is in add goal handler where we set the course goals,
we also have to set isAddMode to false because we're done adding. Now a little side note, the way React works
if you're setting two states after each other,
it will batch these together,
it will not re-render the component twice after first change and after the second change, instead it
will basically apply all state changes at once and only re-render the component once which of course
is good,
otherwise we would have an unnecessary re-render cycle there
and this is simply a nice optimization React does for us. So we can absolutely change two different states
after each other like this
and with that, the modal should know actually also disappear if we set this to false. Let's test it
here on iOS.
If I add learn React Native here, click add, this disappears
and now learn way more, this also works and
I can also still delete items.
Now to test this on Android, same procedure as before,
let's actually restart this on Android,
click add new goal and learn React Native here, click add and this closes it,
now let's also learn way more here, like this and this also works correctly. Now two tiny improvements
I still want to apply, for one I want to clear the input once we're done and in addition, I want to provide
a cancel button, so that alternatively instead of adding this, we could also cancel here to close the modal
without adding an item because right now, that's not something we can do.
Let's start with clearing our input here
after we entered something. For that in goal input, in the end, we have that entered goal and we need
to reset this
once we add a new goal. Now of course, we add a new goal when we press that add button and there in the
end, we trigger a function which we get with the help of the onAddGoal prop.
Now to also clear our input, what we can do here is we can add a function inside of the goal input
component, add goal handler or whatever you want to call it,
this is a function which doesn't have to take any argument and in the end, it's now this function which
I want to trigger.
So I want to trigger add goal handlers,
so my own function in this component. Now in here, I want to call props onAddGoal without bind
here, we can just call it like this because when this function runs, I want to execute it, here we're just
passing a pointer at this function without parentheses,
so here we must not have parentheses to not execute this too early, here
we absolutely need parentheses because this only runs when this function executes and that is when I want
to trigger the function in my parent component,
so in the app component here. And here to onAddGoal, of course I still want to forward my entered goal
here,
so this state, I want to forward this but thereafter, I also want to clear it.
So thereafter, I'll set set entered
goal to an empty string again which will reset the text we entered here.
So that's one thing,
the other thing is a button that allows us to close this and for that, we can add a button here and that button
could have a title of cancel because that's in the end
what this button should do
and for the cancel
button, it might be nice to not have to default blue color but change that color
and you can do this by adding the color prop here,
for example we could set this to red here because red in my opinion is a nice color for a cancel button.
If we save this and we test this here on iOS,
we see the cancel button and and the add button
and now if I learn React Native here and I add this, this is added and if I reopen this, you see it was
cleared and cancel of course doesn't do anything though because we need to connect cancel to the app component
where we control the visibility by controlling the isAddMode.
So here, we can also add another function handler in the app component now, cancel goal addition handler
or something like that,
it's a very long name, I just want to be clear about what this does and when it's called.
So here, we have the cancel goal additional handler and in the end here, we can simply set isAddMode to
false which will close the modal
and of course we're not doing anything else,
we're not changing our course goals because we canceled the addition and now, we can forward this to
goal item, to goal input,
so to our component here. There we can add onCancel prop, the name of that prop of course is up to
you because it's your own prop on your own component
and I've forward a pointer at cancel goal addition handler to onCancel
and now inside of goal input, we can trigger onCancel upon a press of this button.
So here, we add onPress and we want to trigger props.onCancel here,
so the function we're receiving on our onCancel prop. With that, the cancel button should work, yes
works just fine.
Now it should also work on Android of course but to test it,
same procedure as always,
let's close it and restart it and thereafter,
let's see if clearing the input works. If I enter or learn React Native here, click add, yes that's empty
and cancel also works.
Now regarding the styling here on Android, it would be nice to have some spacing between the buttons
or actually on both platforms, maybe have these buttons sit next to each other.