There are about three things we need to fix in order to get the correct effect. The one where we are displaying our five courses and adding these in order. So you'll notice if I remove this one and add it in it displays at the bottom rather than the top currently in our app let's see how this behaves so if I add it adds to the top. If I add in Introduction to Programming with python it adds all the way down here. And if I were to remove this and add in this again you'll notice it's still at the top.

So the problem here is that it's basically mapping over this entire site pretty much identically exactly the same and the same spots. So the first thing we want to fix is we need to filter out our course instances that we are not enrolled in. And then we need to solve the ordering, and then we need to add in the empty slots so that has five empty slots and not a whole bunch or not any at all. So the way we can filter out the course instances is by heading down to mapStateToProps and by simply creating an array and only filling it with courses that we are enrolled in and so that we can use essaying enrolled courses equal to an empty array.

And then let's just set our state to enrolled courses and then let's just map over our state.courses that we're receiving here in mapStateToProps and let's check which ones we are enrolled in and if they are enrolled we will push them to enrolled courses. So we can do this by saying state.courses.map course and let's say if course.enrolled we will push it to our array.

state.courses.map((course) => {
    if(course.enrolled) {
        enrolledCourses.push(course);
    }
})

So now it should only display our enrolled courses and let's go back to our app after saving that, and you'll notice that we don't have all these empty slots because we're not enrolled into any of these.

So none of these are being mapped over, whereas before we were not checking which ones we were enrolled in. So that value the enrolled value was allowing all of them to be in our courses, and it was mapping over every single value. So let's see what happens when we add. So you will notice that it adds, then let's add an Introduction to Programming and let's remove this top one and add it back in. So we wanted to appear right below this we don't want it to appear above it but you'll notice it appears above it which is a problem and you'll notice that if I add in Algorithm Bootcamp it appears above programming with python so it's in between. The same will happen with HTML and CSS. So the problem here is that they're still being mapped over in the same order. It's just that we don't have all those empty slots displaying now which is pretty nice.

So real quick we see all of these logs here let's go ahead and get rid of that. I think it's in our course library. It's right here in our mapStateToProps in our course library. I'm just going to get rid of that console log and then I'm going to go back to schedule.js. OK so we've got the right instances filtering out. Now we need to solve the ordering so since that's kind of a separate thing we will do that in the next guide. Let's go ahead and commit our code and then get into that.

So I'm going to hit command j in Visual Studio code and type git status, git add ., git commit -m "now filtering out instances of course we are not enrolled in, Schedule Component", git push origin master and I'll catch you in the next guide.