Creating Description Page
In this lesson, we're going to create a description page
This lesson preview is part of the The newline Guide to Fullstack ASP.NET Core and React course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to The newline Guide to Fullstack ASP.NET Core and React with a single-time purchase.
[00:00 - 00:14] We created our category page, which was quite straightforward because we had already created show courses component, which made things so much simpler to create that page. With the information we have, we can also create a description page.
[00:15 - 00:30] So let's go for it. If we go to our agent dot t s file inside courses, let's create a new method and let's call it get by ID.
[00:31 - 00:57] It will accept a parameter ID, which will be of type string because our course ID is of type quid and string is the closest representation of that. And we will use request dot get and this time we will receive course as a response.
[00:58 - 01:12] And the URL will be slash courses slash ID. Since we have to mention our ID, we are using the back text.
[01:13 - 01:30] Inside pages, we can create a new page and let's call it description page to make it clear. Import react from react.
[01:31 - 01:36] We will create a function. We'll call it description page.
[01:37 - 02:12] We can return a fragment of the time being and export default description page. We can again create a new state called costs.
[02:13 - 02:30] We will use the use state hook and the type will be costs and we can leave the default value to be empty. We can also use undefined as another type, but TypeScript is smart enough to know that the initial value is undefined.
[02:31 - 02:40] So if you put a cursor, you will see it has type undefined as well. We also want to make an API call as soon as the page renders.
[02:41 - 02:48] So let's use use effect hook as well. Use effect.
[02:49 - 02:59] We know that we want the course ID which will fetch the data for us. So again, let's use use params.
[03:00 - 03:15] That is from react router. And here I will destructure the ID from use params and I can give it a type string to the ID.
[03:16 - 03:28] Now inside the use effect hook, we will call agent.courses.getbyid. We will pass the ID as parameter.
[03:29 - 03:47] I will use 10 and we will get a response and inside we will pass set cause to be the response. And as a dependency, I will pass the ID.
[03:48 - 03:59] Inside return statement, for now we need to see something. So I will write h1 and inside we can just write the title of the course.
[04:00 - 04:07] So cause.title. We need to make this page available in our app.tsx file.
[04:08 - 04:16] So let's go there and copy one route. Paste it.
[04:17 - 04:30] The path will be slash course slash colon ID. And here we want to pass description page which will be imported automatically.
[04:31 - 04:41] Here we are using colon ID because the ID is going to be dynamic here as well. Now we want the user to click on the course card to reach with the description page.
[04:42 - 05:00] So we can go to our show causes component and we can wrap our card with the link. It will automatically import it.
[05:01 - 05:10] Now I can close the link tag. It's giving us an error because we want to use two method.
[05:11 - 05:33] We want to go to slash course slash course.id because this ID will be taken by our page and it will make a request to our API to fetch that particular data. Make sure the servers are running and they are.
[05:34 - 05:45] Now we can go to the browser and see if everything's working fine. If open the browser now we can click on any of the course card and we see the title of this particular course.
[05:46 - 05:57] Let's try it with back end with node.js and yeah, we see the title and the URL is slash course slash the ID. Let's style our description page in the next lesson.