So we spent some time on the input but handling user input is important,
you want to do it in a way that feels natural to the user,
that makes sense to the user
and where you'll never trust your user and you always validate what the user enters
and we'll dive deeper into this whole validation thing,
user input handing things later in the course where we also accept more complex input than a simple
number
but for now, this was a great first look at how you can style such an input and how you can make sure
you get the data you need. With that, I don't know about you but I think it's time to also progress
with our game because we're kind of stuck here,
these are all important steps but we're not really progressing with our game or with our app here.
So let's make sure we do that as a next step and for that,
why don't we make sure that our buttons do something? Let's start with the reset button real quick because
that will be a simple one. When you press it,
I of course simply want to reset the entered value. So I'll register a new function up there in the start
game screen component, name it reset input handler and that's just the naming convention I like, name
these functions which are triggered upon a user event something handler at the end just to make it clear
that these handle certain events,
it's not a must do, just a preference I have for React apps in general and therefore also for React Native
apps.
This will be a function which then calls set entered value which is our state setting function here
to update the state we feed back into the input and set this to an empty string
and yes, with that we can connect this to the reset button here, onPress should now simply execute
the reset input handler like that.
Let's give it a quick try,
let's enter something here, reset and it's gone,
that's looking good
and also make sure that
this button here, the confirm
button does something. For that, I'll add another button, confirm input handler and we could simply start
the game immediately here but also just to practice this,
I want to give the user one final chance of changing his choice, so here I just want to kind of output a
this is your choice,
do you want to start message, where then the user gets a button to start the game, just an extra step
so we have some extra practice here. For that,
I'll add a new state which manages the has the user confirmed yet state and initially, that is false
but of course we can change this and we want to be able to get the current state.
So here we get whether the user has confirmed or not
and we can set this confirmed state with that second element in the array we're extracting. So down
there in confirm input handler, I set confirm to true, on the reset input handler by the way, I set this
to false because if the user clicks reset, the user certainly has to confirm the values so we should reset
this and then here in the confirm input handler,
I also want to do two different things, two other things.
One is reset the entered value but also of course save the entered value as the value with which we would
start the game.
We can do that with yet another state
we're managing which initially holds nothing, has no value, is undefined initially because that should
be the selected number and that should now also really be a number and not some text.
So here, we have the selected number and a function to set it
and when the user clicked confirm before I reset my entered value, though this here will all be batched
together anyway so we can also use the entered value here after setting it to an empty string because
this will only be done in the next render cycle and not immediately after this line is executed.
So we can still safely execute or access this entered value thereafter if we want to
because here, I want to set my entered value with parseInt by passing the entered value, so I set this
to be my selected number
and again, I can still access entered value here even though we reset it because this reset thing here
will basically be queued by React and will only be processed the next time the component is rendered
thereafter
and these three state changes are all batched together to result in one render cycle, so we can safely
access entered value here but we can also simply do it before we reset it,
it does not matter.
The important thing is however that we parse this as an integer so that we convert this text to a number
here and actually, I'll add yet another extra step before I do that. Right at the beginning,
I'll have my chosen number here which is that parsed number
and before I do anything, I want to check if chosen number is not a number which is a default Javascript
value,
so if it somehow is still not a number even though we're trying to check for invalid characters or if
chosen number is smaller or equal to zero.
If it is, then I just want to return,
I don't want to continue,
so return will finish the function execution and will not confirm, will not use this as a value because
the value is invalid,
only positive numbers are allowed and no invalid numbers are allowed.
In addition, I also want to add one extra check and check if the chosen number maybe is greater than
99 because that would also not be allowed,
I want to have a number between 1 and 99 and it should be a number. If it's not fitting that criteria,
then we'll return, now otherwise we'll set this chosen number as the selected number and then reset the
input and then these three set state calls will be batched together and the component will re-render and we'll
have our new state that has this number taken into account as the selected number. So now we can connect
the confirm input handler to the confirm button here and now some visual feedback would also be nice
to see that confirming worked or to also get an error if we violated one of these rules here, so that
we don't just return but also show an alert.
Now let's maybe start with the feedback before we then work on the alert. For the feedback,
here below this function but inside of our functional component, I want to check if we have confirmed and
then set some special content that should be output.
So here, we have the confirmed output which normally is just undefined
but if we have confirmed, then confirmed output is some jsx code where we kind of summarize what the
user entered and give the user the start game button.
Now just to see whether it works, let's go that with some text here and just say chosen number and output
the selected number here, selected number,
this is our state we're managing here.
So since we call set confirmed and so on, the component will re-render when this is chosen,
so this whole component function will execute again and that means that confirmed will then be true
for this next run because we set it to true here and therefore we'll set confirmed output to be that
text
and now we can add the confirmed output, let's say here below our card.
So there I want to output the confirmed output and that's either undefined, not printing anything to the
screen
or it's this text. With that saved if we go back and I enter number and confirm it here, we see the
number.
If I enter something invalid like zero, we don't see it,
so our check seems to work and a valid number is output though.
Now that's not the final design I want to have but that proves that it works.
Before we finalize this design, let's make sure that we also show an alert if something invalid is entered.