In this guide, we are going to make it so we can only add five classes because I don't know about you but I'm not trying to take 500 classes in one semester. That's not good, you've got to take things slow.

So the way we can do this is by first in our add course reducer declaring a variable called enrolledCount. And the reason we're doing this is because we need to keep track of how many courses we're enrolled in and we're enrolled in 5 then we no longer want to allow us to change course to true. The course enrolled value to true because that way we won't render any additional courses on here. So under here we just need to go through our state and increment this by one every time we reach a course that is enrolled. So state.map course and you can name this whatever you want. It's just going to grab the value out of here and give it this name then we can refer to it as whatever we've named it.

So if you wanted to name it something else you could, it would work but we want to give it a variable name that we understand and that's why we're calling it course. So state.map and then if course.enrolled we just simply want to say enrolled count we can do this three ways enrolledCount is equal to enrolledCount plus one. That way it'll go up one every time we have an enrolled course so it'll say we have one, two, three and that would work. Or we could just say plus equals one and that would be the same exact thing. Or we could just increment it like ++ and it would work exactly the same.

So I just wanted to point that out that so you could understand what I'm doing here and it's not just a mystery to you of why there's two plus there. So it's just incrementing this so if we console log this I'll show you what I'm talking about enrolledCount. Okay, let's see that and let's go back to the browser, let's open up our console and first let's get rid of this. This is back in our schedule.js if you remember we were just printing out the index so we could get that key right in the last guide.

Remove that console log and save, reload it and then let's try adding some courses. We have 0 1 0 1 2. OK. All right.

So that's printing out each time we are and the reason it's behind one is because we're logging it before incrementing it. That's why it's saying the wrong numbers let's save that it looks like it's off by two but that's because we're starting at zero and then we are console logging it before so let's try adding them now so add, add so we have 0 1 2. Okay.

All we have to do now is delete this console log and then in our estimate here we just like to say okay if enrolled count is less than 5 it's going to be one less than 5 because arrays start at zero. So we have to say okay because our fifth course isn't going to be incremented yet. So if you go back here you'll you'll notice that it's off a bit this is 1 2 and 3.

So we are seeing enrolledCount++ and then we have our console log statement here. So it's saying okay every time we add this it's going through and we have four enrolled courses right so you'd expect it to when we hit and you'd expect it to say 1, 2, 3, 4, and 5. But the reason it only goes up to 4 is because the fifth course that we're adding here hasn't yet been set to true, we haven't yet enrolled in the course. So it's only going to recognize the first four courses right here. So that's like saying 1 2 3 and 4 so if we get rid of that console log it is going to log it right here.

Let's see how can we do this and enrolledCount++. All right, yeah well, let's just say okay if the course is equal to action.payload we have four courses already. This is going to be the fifth course. So we don't want to add any more. So we basically just need to check if enrolled count is equal to 4 because we know this is going to be the fifth course and that's the limit we want. So if course is equal to action.payload and enroll count is less than 5, so it's 4 or less than it will allow us to enroll in at least one more. So let's save that let's add in five or so courses and you'll notice if you try to add in a sixth course it does not allow you to.

So if you didn't understand that just take a minute and walk through this in your head or on paper before moving on. It's kind of a complicated thing to understand if you kind of miss the point of enrolling in the course here after. So just go through that a couple of times and make sure you understand it before moving on, and then we will be good for the functionality of the schedule component.

In the next guide we are going to style this a little bit better we're going to fix the background here so we don't see that white part of the bottom when we have this open. The way we're going to do that is by basically fixing this to the screen so that when we scroll only this Course Library component scrolls and not the schedule component.

So I will see you in the next guide, when we do that. Let's just commit our code real quick so git status, git add ., git commit -m "added a course limit to our ADD_COURSE reducer for our schedule component", git push origin master.

And I will see you in the next guide where we will fix up some of the styles. And then after that, we will take care of the rest of the styles and then add in the progress component.