All right, so our function only works if we don't run out of the items or if we don't try to look for
the items that have the negative indexes.
So how we would be able to fix that?
Well, since in here we just go with an X minus one in X plus one, I could set up the use of fact.
Please keep in mind it is just one of the ways how we could set up the slider.
Technically, we can also set this functionality in here when we are either decreasing or increasing
the value of the index.
But I just wanted to use in this case, the use effect.
So what we could do is just set up a usufruct which will run in two cases when our index changes or
when our people changes.
At first I would want to get the last index of my people.
So I'm going to vote cards and then last index is equal to a people and then length, not story length
and then minus one.
So that is always going to get me the last index in my array.
If I have fifty thousand items or if I have five and once I have the index, then I'm just going to
check Mersa if index is negative, well then I would want to set my index equal to the last index.
So last index.
Now why am I doing that again.
Because there are no items so person index will never be negative.
And in order for me to add that last slide, if I click on Priv right away and of course I just need
to check Masen index is negative.
So set the index to be the last index and you'll see what happens in a second.
So once I save, you'll notice that at this point, once I click, then of course my functionality works
quite well because I decrease the index.
But in the use effect, I called that.
I said, hey, listen, if the index is less than zero, so set index to be the last index.
So now, of course, when we click on PRIV right from the get go, Susan, of course has the last slide
correct.
But she will become active because what we're doing, we're saying set index equal to the index.
So now our index, the last index will be active.
So, Susan, we'll get the active one.
And then in this case, when we're checking, hey, index minus one.
Well, what is the value now, of course, of that value?
Makes sense because that's why we're displaying the beta.
That's why we're able to do this.
And you can probably already guess that we need to do the same thing if we run out of the items.
Now, how do we run out of the items?
Well, that is if the index more here is bigger than the last index.
If that is the case, then I would want to go back to the start and I'm going to say set index zero.
And our functionality definitely works because I keep on looking for the next items.
And then once I'm at the end of the array, well, then again, I just flip it back tomorrow.
Now, if I'll be looking right from the get go from the previous one.
Notice how nicely again, change the classes as well as the indexes.
And I also want to set up right away the use effect where we have the order slide.
OK, so let's navigate back.
We'll set up another use effect because remember, we can have as many used effects as we would want
and we'll say here, use fact and we'll set up my interval.
So in JavaScript we have set interval.
And let's just say that every time the index will change, I would want to set my interval.
Now there's going to be one Gocha.
So let's call our set interval now.
We need to pass in our callback function and then in how long it's going to run.
So I'm going to go with three seconds.
So that's what it is.
Three thousand milliseconds.
And what I would want is in three thousand milliseconds or three seconds, I would want to call my set
index and then I'll add one plus one.
Now it's up to you if you want to go the opposite direction.
If you want to go back to the end of the day, you can also do that as well.
Mark, I'm just going to say set index and then plus one.
So in three thousand seconds, once the index changes.
I would want to see the next slide, but if there's going to be a gotcha and this is going to be a perfect
use case of why we need a cleanup function, this is exactly why I did this example, because you'll
notice that if I start clicking over here watching the next slide, well, there's going to be a mess
eventually.
And why is that happening?
Well, because every single time one index is changing, I'm invoking this new set interval.
And that's not what I would want.
Right.
What I would want is to clean out the previous one.
So once I click, yeah, I would want to add this option that after, I don't know, three seconds or
whatever, the active slide becomes a different slide.
But I don't want to do this every time I click because notice that I have just a bunch of set intervals
and my application goes bananas.
Now, what is the solution?
Well, set interval returns a value.
I'm here.
I can say, let's slider and I'll hold on to that value.
And then in my clean up function, I'm going to clear out the interval.
So in that case, what is going to happen that yes, once I click, once I increase or decrease or by
the way, I remember this also runs by default, meaning on the initial rather than before.
I set up a new interval.
Next time I click on a button, I will clean out my previous one.
That's why it is so crucial we go with return now or callback function and then in here we just passing
clear interval and we pass in the value that we got back from set interval.
So now it's going to happen.
Is that once you click, yes, after three seconds, there's going to be a automatic slide.
Now, if you want to change this value to, for example, five seconds, that's up to you.
But now, if I press multiple times, you'll notice that my functionality doesn't break, OK?
Still, it checks for the last time I clicked because it removes the previous ones, the intervals and
only the last time I click.
Then after 30 seconds, I can see my next slide.
And of course it is also happening on our initial render notice.
Once we refresh, we're going to get this on a slide again.
Probably the toughest part is going to be over here where depending on that index, we're adding those
slides.
Hopefully everything is clear.
How is that happening with us?
Hopefully everyone enjoy the project and I hope to see your next project.