First things first let's go to our application close the terminal and every file. Let's start off by opening index.js in actions and looking at our payload. All we need to do is provide a variable here called enrolled. So let's put a comma after these descriptions and say enrolled: false. Because we are not going to be enrolled in it. Then I am going to copy this all the way to the comma, and then go and paste it after every description.

The idea is that we are not enrolled in any classes when we start up our application, although if we had user objects and we were logging into the app, some of these might be true. Let's go ahead and move on by using this. We need to somehow switch this, but first we need to check this variable and if we are enrolled in it then we want to display it in our schedule. Clearly, we still haven't mapped data over here. So let's make this video about displaying courses in here if we are enrolled. So let's go into our schedule component, and we want to do the same thing that we did in the last video. We want to map over this data, which means that we need to get rid of it and then we need to get our data. If you remember how we did that, we did it using mapStateToProps and Connect. So let's do that in our schedule.js component. Let's start by importing connect.

So let's go ahead and implement mapStateToProps in here:

schedule.js

function mapStateToProps(state) {
    return {
        courses: state.courses
    }
}

export default connect(mapStateToProps)(Schedule);

So you might be wondering why didn't we put in the null or the actions here. We don't need them here until we implement the remove feature, which we might implement in the scheduleCourse component rather than the schedule component. Let's instead map over this data and render it on the screen like we did in our library.js. Let's go ahead and do the same thing by copying this entire function.

Then we go into our schedule component and inserting it above our render function. Now what we want to do is render it the same way. We want to put { this.renderCourses() } and we want to put ScheduleCourse instead of LibraryCourse.

We still want our course data and an index, although in our scheduleCourse component we are not utilizing this data the way we should. So let's go to the scheduleCourse.js component, and utilize said data very effeciently. All we really need is the title, we don't really need the description. We are using this very well. This doesn't need to be changed. We made this very scalable. Most people like to say that scalability only applies to back-end, but that is a complete lie. You can make anything in life scalable. Your front-end application being one of them. By scalable I mean writing really good code so that in the future when you make refactors or add in additional functionality it seamlessly or with very little error slides together. You will see that happen.

So let's go ahead and see if this works. Let's go to our application and reload our page. You will see that you have every course in here, which is not good because we are not enrolled in all the courses we are not enrolled in.

So all we need to do is simply say:

schedule.js

renderCourses() {
    const data = this.props.courses

    return data.map((course,index) => {
        if(course.enrolled) {
            return <ScheduleCourse {...course} key={index}/> 
        }
    })

}

This way it will only return the courses that we are enrolled in. You'll see now that since we are not enrolled in any it will not render any. So let's move onto the next video where we will learn how we can click on these items and change that enrolled status to true, and have it automatically render in our application here. So let's go ahead and commit our code. Let's say git status, git add, and git commit -m "mapped course data over to schedule component to only render courses user is enrolled in". That's a good commit message that other developers can look at. Ok, See you in the next video.

Resources

• Source Code