And while we're still on a topic, let me showcase of that, of course, there's another way we would
be able to set up the functionality.
But please let me emphasize something.
This is optional.
If you are not interested in this alternative approach, of course, you can just move on to the next
project.
And what I'm trying to show you is that we don't have to use this use the fact.
So the first one, not the second, of course, is for our like.
So I want we will keep this one.
We can refactor it a bit and we can set it up when we're clicking on the buttons.
OK, so I'm going to open up right now my source folder, and then I would want to create a new file
and I'm going to call this alternative like so Andrius.
Then I'm going to grab everything that I have in the Jazz.
So essentially, copy and paste like, so somehow we copy and paste and then you can keep the name here,
notice, of course the component name is up, but then since we're exporting as default, it doesn't
really matter.
And then navigate in the US and import that alternative.
And where I'm going to set this up will keep most of the code and we'll just refactor it in a few places.
So we're going to go here with import and I'm going to call this alternative like so and that is coming
from my file alternative file.
And of course, now I'd want to replace instead of AB, I'm going to go with alternative.
And if you copy paste everything correctly, of course the functionality won't change because we haven't
refactored anything.
And of course, I'm going to navigate back.
And then like I said, I would want to set up my functionality without this year's effect because I've
been getting some questions about why we're using user.
And the idea was to show you that there's multiple ways how we can do that.
And I just wanted to place all my logic in this one usufruct, because you'll see in a second that,
yes, we can set it up in a different way.
But then we're placing this logic, the one that we currently have in two separate functions.
So.
What I would want is notice here how we're setting up the index when we're clicking on the buttons.
Now, I will remove both of these lines of code.
So UNCLICK is going to be next slide.
So the function that we haven't created yet and the same is going to be over here.
So, of course, by the way, I messed that up.
This should be next slide.
And that one was previous.
So let me remove over here and then I would want to create those functions.
So where I have the use, the fact before or after, it doesn't really matter because we will remove
it eventually.
Anyway, I'm going to go with const and then next slide and no one is equal to my function.
So I'm not as far as the logic, I would want to increase slide by one.
Correct.
That's the goal here.
In this case, I'll check in the function.
What is the index and if the index is bigger than the last index?
Well, and of course what I'm going to do is set it back to zero.
So in here, let's go with set index and we'll pass in the function.
Remember, there's multiple ways that we can increase the value in a state and this is going to be the
functional approach where we're passing the function.
Then we have the old state value as a parameter.
In this case, I'm going to call this index and I'm just going to say let index.
So there's new variable by the name of index.
And I'm purposely using what?
And I'm going to go with old index plus one.
Correct.
Now, why we're doing that?
Because, of course, we are increasing the slide.
All right.
That's good.
But then, of course, since eventually I will run all the slides, I need to check what is the value
if it is bigger than the last index?
Well, then, of course, I would want to set it back to zero.
So we're going to go what if index is bigger, bigger than people, not Mirae and the length minus one.
So if the index is bigger than the last in Imura, then of course index is going to be zero.
And then I remember when we used function approach, whatever I'm returning from this function now is
going to be that new value.
And what am I returning?
I'm returning index.
So if the index is not bigger than the last index, then we simply increase by one.
If it is bigger than index, then of course we go to zero and you can probably already guess that we're
going to do something very similar in a previous slide.
A difference, of course, is going to be that will subtract one.
So all the index this is going to be minus one.
Then I'm going to be checking whether it's less than zero, so less than zero over here.
And then if that is the case, if it is less than zero, then I go with index is equal to people that
link and then minus one and I do the same thing.
I return the index.
And once we add both functions, of course now we can comment about the use of fact.
We won't need this anymore.
But there's one tiny Gotcher notice of the usufruct where we're setting up the like in this case.
Again, we are not checking this value.
Correct.
We just go with that index and then we say plus one.
So eventually, if we're using that autosite, of course, we will run out of those slides.
So I purposely let this slide wrong and then notice eventually how we run out of slides.
So what we have right now is the next and prive.
So of course that works if you start clicking on the buttons.
But if you'll just let slide, then of course eventually you will run out of slides.
And what we would need to do is just grab the callback function that we have and pass it here.
So instead of this index plus one, which is copy and paste and our functionality should work, so we
go data slide and then eventually once we run out of slides, we just set our index back to zero.
And we're going to be in good shape.
So let me just wait a few seconds now.
I'm going to have the last slide and let me just double check that everything works.
And if that is the case, then, of course, we can move on to the next project.
Beautiful.
Everything is exactly like we wanted.
And of course, we can work on next project.