Nice job with our basic return in place, of course, we can add the functionality where as we're clicking
on a button, we're displaying either the next person or the previous one.
And of course, we will need to send that up of these buttons.
So before we set up the functions, I mean, just add right away on click.
To the and the next and I think I'm going to call as far as the function names, one is going to be
brief person and next one is going to be a next person.
So I'm going to hold brief person.
Of course, that function doesn't exist, so I'll have to create it.
Otherwise we're going to get a nice error and then copy and paste and I'll just say next person.
So once I have my own collection, of course it's time to work on the functions and I think we can go
with the next person first where I'm going to go with CONSED and then next person of course, next person
I'm that is equal to my function.
And then inside of this function, what I would want is to call of course set index because I would
want to change the index.
However, just so we can keep on practicing, I'm going to go with functional update form where I go
with setting X and then I pass in the function.
Remember as a primer, we are accessing the current state value and in this case I will call it the
same answer that night as the index and then whatever we were returning from this function, of course,
now will be that new state of value.
So just to be a bit more explicit, I'm going to go with new variable.
I'm going to say a new index, and that is equal to the index plus one.
Why?
Because I would want to see the next person.
Correct.
So if I have zero, then I would want to increase it by one, which would be, of course, person number
two, since there are zero the next person.
And then once I have that new index, then of course I'm going to go with a return and I would want
to return that new index.
So what we can do is just save.
And then we still have a plan for the person, just copy and paste and then we need to change these
values around.
So Prešov person, that is the name of my function.
I still access the index.
It's still going to be a new index.
But of course, since I would want to see the previous person instead of index plus one, I go index
minus one, I save it.
And when we click on a button, we should see the next person.
Now, eventually we will run into there and there is going to be simple we're index.
So the state value.
It's going to be bigger than the last items index in my right.
So if I check my data, I can see that I have added one, two, three, four.
So I have four items.
So the last index that I have is number three.
So once this index gets bigger than three, then of course I have the error.
Why?
Well, because I'm looking for people.
I'm an index number for for example.
And then, of course, if the item is not there, well, that's why I have this error.
And as far as the previous eye, right away I have that error because I'm looking for index minus one.
So the preview is going to work if I navigate to the last person or maybe to the first person or whatever.
And then, of course, I can still toggle here back and forth.
So it works.
But the problem is, once I get to the end of the day or beginning of the right and of course my functionality
falls apart because such an indexes don't exist, whether that is negative or in my case, bigger than
three.
So what's the solution?
Well, we can add here manually where we're checking for the value.
And if the value is, for example, bigger than the last item in the array, then I just flip it to
zero.
Or since I know that I'm going to use it multiple times, I can just come up with a function where I
go with CONST and I'll name this check number.
Now I'll pass here the number.
So as the argument, I'm going to be looking for a number and then inside this function I'm going to
check, I'm going to say, hey, listen, if the number is bigger than the last item in the right,
then return zero.
If the number is less than zero, well, then return the last item in the array.
So here I say if I'm not number and in order to get the last item in right, I need to go with my right
name, then length and then minus one, because again, the arrays are zero indexed based.
So in here I say if number is bigger than people and then that length and minus one.
So if my number is bigger than the index of the last item in the right, well then just return zero.
So then return the first item in the array.
However, if the number is less than zero, well then of course just return to the last item in there.
So I go here with number is less than zero, then of course return and now the value should be people
on earth minus one.
So if I come to the beginning of the right now, I would want to display the last item.
Now, if the number is neither of these cases, then I can just simply return number.
I can go with the return and the number.
So I'll serve it here.
And then instead of passing the new index now, I would want to pass that new index in my check number.
So I go here with check number and I pass in the new index the same thing I'm going to do over here
where I'm displaying the last person.
So instead of just returning a new index, which of course could be negative now I'll pass the check
number.
And then if it is negative that I know that I'm going to get the last person in the array.
So now, of course, our functionality works.
We're notice we can go forward and we can go backwards.
And if we come to the beginning of the year, then we display the last item.
If we go to the end of the year and of course, we just display the first item.