This video is available to students only

Adding Show Courses Component

In this lesson, we're going to create a new component to show courses

Adding Show Courses component#

One of the main reasons to use React is to use reusable components. Since this is an e-learning application, a lot of pages will hava a responsibility to show courses. We have made a courses component which is working as a homepage, so first of all, let's copy everything from here to Homepage and delete Courses.tsx file as this was working as a homepage. Let's also rename this to Homepage.

If we want to make a new component, we can create a new component that will only display courses, so that we can use it anywhere. We will just provide it the data and it will display courses, so let's create a new component, ShowCourses, and import React from react and create a new function, ShowCourses, which will return fragments, and export default ShowCourses. Let's go back to Homepage and cut the return part and paste it in ShowCourses. At this point, we see a lot of errors. Let's resolve them one by one. We will import Col from antd, and Card as well. Let's also cut the state, the ShowCourses function, useLayoutEffect and paste it inside ShowCourses. We also don't want to call checkWidth function here, so let's cut it from here, and use the useEffect hook in ShowCourses and paste it there. Let's copy the showStars function too.

Now let's talk about what we're going to receive as props. It's pretty straight forward; we will receive course of type Course, so let's write our interface, Props course of type Course, and let's destructure course and write Props here. Now we can go to our HomePage and return ShowCourses component. We will also pass course as props, and pass the index to the key.

Start a new discussion. All notification go to the author.