We'll also be making it so you can't add more than five courses. So to generate these empty slots all we have to do is pass an a course with course.enrolled set to false. That way we will be generating our empty slot here. So right here let's test this out by pushing a course object with enrolled set to false. That way we will have one of these slots generated so let's go ahead and reload or app. And this is in schedule.js around line 40 in compnentWillReceiveProps right after we go through our next prompts.

So you'll notice we have our slot here let's go ahead and add something to it and we have our slot still and you also notice that it doesn't matter how many classes we add we just always have that slot.

So we have to think of a way we can get in only 5 slots at the most but then keep them from remaining after we have 5 courses or any courses on there. So the way we can do this is by simply taking an array and saying for variable is equal to newEnrolled.length and the reason for doing this is because we want the array to start here and if we go to less than 5 then no matter how many courses we have in there it's only going to go up to 5 so if we have one class its going to go up to 5.

We have 2 classes it's going to go up to 5 still, so we'll generate just the amount of slots we need. So let's go ahead and in here we'll push this to our array here and that should solve the problem. Let's reload the page and check it out.

Okay, so we have our five slots and you'll notice when we add it doesn't work.

And the reason it doesn't work is because we're using that key property wrong. If you scroll up to render course you'll see that we're seeing this.props.courses.indexOf(course) and if you take this and you print it out saying console.log(this.props.courses.indexOf(course)); and go back to the browser, you'll notice they're all negative one.

That's a problem because these need to be unique and if they're all the same they're not unique. And the reason it's negative one if you'd like to know is that props.courses doesn't contain anything at this point. So let's go ahead and change this, what we need to change it to is enrolled. Because this is what we're mapping over here. This stuff state.enrolled so let's delete these comments real quick and then let's slide up to our renderCourse function again and what's changed with this.state.enrolled so this.state.enrolled.indexOf(course) because we want to get the index of the course in our enrolled array.

Now if you save it you'll notice that its saying 0, 1, 2, 3, 4.

So those are all unique and you'll notice when we add it works great.

So are courses are adding in order. We have our slots here and we're getting no errors. But you'll notice that we are getting more classes than we want. So in the next guide we will figure out how we can solve this so we can only out up to 5 courses and we'll be doing that in the reducers so if you want to go ahead and give it a shot try to figure out a way we can only allow 5 courses to be in our schedule component.

So we need a way to make it so once there's 5 when we hit add it won't add it it will just say add and maybe we can put in an alert or something but we'll do that later. So before you get into the next guide just try and figure out how you can make it so there's a limit of 5. Just to give you a hint you do it in the reducer here.

Okay so lets commit or code, git status, git add ., git commit -m "generate up to five empty slots", git push origin master. And I will see you in the next guide where we will walk through how to give this a limit of five courses.