Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
React 3
  • Overview
  • Transcript

2.3 Detail Page

We have our list of guitars, but we also want a page to display their individual details. We'll build that page in this lesson.

2.3 Detail Page

In the previous lesson that we started working on the home page of our application, which is nothing more than the index. It's displaying all of our guitars but that's all it's doing. We want to add some links so that we can navigate from this page to view each individual guitar in their own separate page. So we're going to start inside of our guitarpreview component. Because this is where we need to add the link to viewing the individual page. Now if you'll remember we went ahead and imported link from react router and so then we just need to decide where are we going to put this link? Are we going to make the entire thing a link or just the text, the name and the manufacturer? And let's go with that option. So the link component is very simple,we start with link and then we specify where we want to link to. And then we will have the content of our link which is the name and the manufacturer and that is going to be it. So as far as our linking to it makes sense for our URL to look like this /guitar/ and then the id. So let's put the id there, this props id and that's really all that we need to do here. So we're done here, let's close this file and let's create a new file under our pages for displaying the guitar itself. And so let's just call this guitarjs and then of course the first thing we want to do is import react from 'react'. And we also want to pull in our data because we are going to get the id of the guitar that we want to display. So we need our data so that we can query the data and hopefully get a guitar. So, let's import guitar data from, we need to go back a couple of levels so that we can get to the data folder and then our Guitars file. So we are going to export default, class, guitar and this extends react, components, and then inside of our render method the first thing we want to do is get the ID of the guitar. Now, we are getting this as part of the URL but we get to decide how we access that. For example, let's create a variable called id, let's make this a constant so that the value cannot change. And we have a prop called params. Now, the param that we use is determined by how we set up the route for displaying an individual guitar. So if I go to app routes, we are going to add another route here where we get to specify the path that's going to be guitar slash and then the ID. And we get to specify what that ID is with a colon and then, whatever identifier that we want to use. So we could say ID, but I'm going to say guitarid, just so that as I'm writing the code I know what exactly I'm getting. So we have the routes, the path is guitar/ and then the ID and then we get to specify the components that we are going to use to render this route which is going to be guitar. But of course we also need to import that as well. So let's import guitar from and our pages, Guitar. So we are good to go as far as our routes are concerned. So let's go ahead and close that. So whatever we used for the id segment in our URL in the routes, we are going to use here. Now if we had used ID then we would use ID but we have guitar ID The next thing we want to do is get the guitar from our data. So let's say guitar = GuitarData, we'll use the find method. And we want to find the guitar that has the given ID. So g.id = ID, now it's possible that we don't have a guitar with that given ID. So let's check to see if we don't have a guitar because if we don't then we want to display a not found page so display not found. We will come back and do that but if we do have a guitar then we just want to render that guitar and I'm going to paste in the markup for this. So we have a container that is, of course, a part of bootstrap we have a row that is going to display the manufacture and the guitar names so this is the title or the heading for this page. And then we have another row that's broken up into two columns the first column is just the image of the guitar. The second column displays all of the information that we have about that guitar. So we're using the guitar object that we have to display the manufacturer of the name. We are getting the image as well as the year, the neck material, the fingerboard material and the number of frets. So that's what we're doing here, there's nothing complicated as far as what we are displaying. So let's save this. Let's go to the browser, and let's go to our Home page. So here we are, let me do a hard refresh a couple of times. And if we click on any one of these links, then we should go to the individual page, and we do. So here's the Fender Strat. There's the description for the Strat, there is the Les Paul, and then we have the Ibanez Talman as well as the PRS Custom 24 SE. So, this is working. So, now let's go ahead and handle when we don't have a guitar to display because this is going to be very simple as well. So basically what we want to do here is return another component and we can just call that not found. So of course we don't have this. So let's write this as a page because that's essentially what this is going to be. So we'll call it not found, we want to once again Import React from "react" but we don't really need to import anything else so we will export our class simply called Notfound. We will extend React.component, and then our render method is going to be very very simple. All we want to do is say that, hey we don't have anything here so let's use, H one element, the guitar cannot be found. Now we would probably want something a little more generic so that we could reuse this any time that we wanted to say that the page that you requested is not found but this is going to work in our case. So let's go back to guitar, let's add an import statement for Found that is from, and simply notfound, and we should be good to go. So let's force this to not work. Let's say that if the id is equal to 10, then we will have a guitar. Otherwise we will return that phone, so this should never work. Let's refresh the page, let's go to any one of these and that's what we get, this guitar cannot be found and we will get that on every page because we hardcoded that value. So just go ahead and change that back so that we have what we would expect and well we need to do a hard refresh and there we go, we are back to working. So for the most part we are done with the client portion of our application. We are displaying all of our guitars and the home page and then we are displaying the individual guitars, all of our navigation works like we would expect it to. But if we try to actually go to one of those items, by typing the URL into the location bar, of course that's not going to work, because we don't have any server side code that's going to handle that request. And so in the next lesson, we will start writing the server portion of our application.

Back to the top