Adding Show Courses Component

[00:00 - 00:11] One of the main reasons to use React is to use the reusable components. And since this is an e-learning application, a lot of pages will have a responsibility to show courses.

[00:12 - 00:22] We have made a component called courses, which is working as a home page. First of all, let's copy everything from here.

[00:23 - 00:50] And let's go to our home page and replace this as home page here and let's rename courses to home page. Now we can delete our courses component.

[00:51 - 01:03] If we want to make a component, we can create a new one that will only display courses, so that we can use it anywhere. We will just provide it the data and it will display courses.

[01:04 - 01:27] So let's do one thing, create a new component and let's call it show courses. We will import React from React and we will create a new function.

[01:28 - 02:07] Let's call it show courses, which will return just the fragments and we will export default to our courses. Let's go to our home page and cut the return part and paste it inside our fragments.

[02:08 - 02:20] We see a lot of errors, so let's resolve them one by one. We will import call from ant design and same goes for our card.

[02:21 - 02:42] Let's also cut the state span well and the check width and the use layout effect since this is the responsibility of our show courses now and let's paste it here. Let's also import use state and use layout effect.

[02:43 - 02:46] Let's see what else we need. Okay, so check width is not required here.

[02:47 - 03:06] So what we can do is create use effect hook here and we can use the check width function here and I will pass the empty brackets as dependency. And what else?

[03:07 - 03:22] Okay, let's also copy the show courses, sorry show stars function and paste it here. We need to import fikens.

[03:23 - 03:49] Okay, and this import the act should always be on top. So let me paste it on top and also let's import star as f a icons from react icons slash f a.

[03:50 - 03:56] Now let's talk about what we are going to receive as props. It's pretty straightforward.

[03:57 - 04:32] We will receive cause of type cause. So what we can do is on top, we will write our interface and this will be called props and as props, we are going to receive cause and this cause is going to be of our cause model, which will be imported automatically and inside a function, I can de structure cause and write props, which is the name of our interface.

[04:33 - 04:45] Also the index we can get rid of it because we will use it when we will use the show stars component in our home page. So which errors are left.

[04:46 - 05:07] Okay, so here we simply can return show courses and we see errors because we haven't passed the props, which is costs. So let's write cause and we also want to provide a key to make it unique.

[05:08 - 05:16] So I will call key to be the index. Now we don't need F.A. icons and card from and design.

[05:17 - 05:22] And we also don't need the use layout effect. Yeah, and row.

[05:23 - 05:34] So I think I can import row and all the errors are gone. Now by doing this, we have made a reusable component.

[05:35 - 05:43] We can use it anywhere we want to show our causes, which is amazing. Let's make sure everything is working fine.

[05:44 - 05:52] Our client is running and our API is running as well. So we can open browser to see if everything's working fine.

[05:53 - 06:02] And it is working fine now. Let's also make sure there are no warnings and we have no warnings, which is amazing.

[06:03 - 06:04] Let's start working on another page in the next lesson.