So now we're going to create the product detail screen, which is going to be if we click on one of
these and you'll see that the route is product slash and then whatever the ID.
So first thing we'll do is create a new screen and let's call this product screen dot JS X, and we're
going to just map out a component and we're going to need to get the ID from the URL so we can get that
with a hook called use params and that's from React router Dom.
So let's say import use params from React router dom.
We're also going to bring in our products.
So let's import products from and then dot dot slash products.
Okay, so we have our product screen, we're going to get the ID from the URL.
So first off, let's do const and yeah, so basically we can destructure any anything from the, the
params.
So we're going to have an ID, but I'm actually going to rename it to product ID like that.
Okay.
Actually let's put a space there and then let's fetch the product based on that ID because remember
we're just dealing with hardcoded data right now.
We're just dealing with an array.
So what we can do is use find.
So we're taking our products array coming from products dot JS, we're going to find and say where the
product underscore ID equals the ID that's in the URL, then give me that product and put it into this
variable.
And for now we can just do a console log of product and yeah, we'll just do that for now.
So let's save and then let's create a route.
So we're going to go into our Index.js I'm going to copy down home screen and we're going to change
that to.
Product screen.
So right here, say import product, screen, and then let's take this route, copy it down.
Except I want to get rid of the index equals True, because it's not the index.
And the path for the path, let's do slash product.
Now we have the ID as well, so we need to have that as a placeholder.
So it's going to be colon ID, Okay.
And then we're going to make this the product screen.
So let's save that.
Let's come over here, click on one of these and you can see product screen if I open my console.
There it is.
So we have our Bluetooth or our AirPods, whatever they're called.
All right.
Now, obviously, we want to display it nice and neat here.
So we're going to come back to our product screen and we're going to add the output.
So let's get rid of the console log and then let's see, we're going to come down here.
Let's just make that a fragment, get rid of that.
And I want to have a back, a back button or a back link.
So I'm also going to bring in link.
So let's say import link.
And then I'm also going to bring in the some stuff from Bootstrap or React Bootstrap.
So let's do that.
We'll say import row.
Uh, ro call.
Actually, I think that's all the stuff we need there.
So roll call, image list, group card and button.
And then I'm also going to import the rating component that we just created in the last video.
So now let's come down here and let's create our backlink.
Okay, so we have a link.
Got a class of BTN, BTN light margin.
Why three?
So if we take a look, we now have a go back button.
Okay, so now under that, let's do a row.
So close that up.
And in the row, we're going to have a column.
Okay.
Actually, we're going to have three columns on the details page, so let's do call again.
And then one more time.
So we have.
633.
I actually want to change that, though, to five.
So the 12 is the total, right?
You have 12 columns going across.
The first one I want to take five.
Second one I want to be four, that's nine and then three, which was 12.
Okay.
I know you guys know addition.
So the first one is going to be the image.
So we're using the React bootstrap image component source is going to be the product image.
All it will be the name.
We're also making it fluid so it can get smaller, so it's responsive.
And then we're going to have the name along with the rating and all that.
We're going to put that into a list group.
So let's say list group variant flush, let's close that list group.
And then inside there we'll have a list group item with the title, not the title, the name close that
list group item.
Then we'll have another item that's going to be the rating.
So for that we're going to say the value is going to be product rating.
The text is going to be again the number of reviews and then just the text reviews and then let's close
up the list group item.
And then for the price, that will be another list group item, we'll just say price and then whatever
that price is.
So if we save it at this point, it should look like this.
Okay, which looks pretty decent.
And then the third column, basically this is going to be where we have the again, we're going to show
the price.
We're also going to show if it's in stock and how many is in stock.
We'll also have the add to cart button here.
So let's wrap all that in a card.
Okay, so we have our card and then inside the card we're going to have another list group and then
a list group item.
And the first item we're actually going to put this in a row.
It's going to be the price in the column.
And then in another column we're going to have I'm sorry, the heading or title, whatever you want
to call it, is in the first column, then the actual price, then we'll close the row, then we'll
close the list item.
All right.
And then the list.
Did we close the list group?
No, we didn't.
We need to close that.
Um.
There we go.
All right, So let's just see what that looks like.
So we have the price.
So now we're going to have another list group item.
So let's go underneath that.
And actually, you know what?
I'm just going to copy this list group item.
And this one instead of price, this is going to be the status.
So for the heading, I'll say status.
And then for this, this is actually going to be a ternary.
So we're going to say if the product dot and then we have count in stock.
Right.
And we're going to say if that is greater than zero, then we're going to have the text in stock as
the status.
Okay.
Else so else we're going to say out of.
Out of stock.
Okay, so this particular item is in stock.
We just want to get rid of that money sign.
All right.
So that's the status.
And then we're just going to have the add to cart button.
So that's also going to be in a list group item.
So let's go under this one and let's say list group item.
Let's close it.
And then we're going to have our button.
And it'll have a class name of BTN block, a type of button disabled.
So basically we're going to say if the count is if the stock, if it's not in stock, then it's going
to be a disabled button because obviously you can't add it to Cart if we don't have it.
All right.
And then the text in the button will just say add to cart.
So let's save that.
And there we go.
So that's our details page and we'll add more to this later on.
But this is just, you know, basic actually, you know what?
We don't have the description, so the description is going to go under the price.
So right here we have.
Let's see.
We have our list group.
No, that's the.
So the price is actually here twice.
The first one.
I guess we don't really need that, but I'm just going to keep that there just because I had it initially
and then the description.
There we go.
Right now if we go to one that is not in stock.
Let's see.
Let's look at our data.
So if we look at our products JS.
In stock.
Ten, seven, five.
Um.
11 seven.
So right here, the echo dot isn't in stock.
So if I click on that, you'll see the Add to cart is now disabled.
Okay, So we have our details page, our details screen.
So now we're actually going to jump into the back end in the next video and we want to serve these from
the API.
We're not going to get into the database just yet.
It will still be from a file, but we'll have an endpoint in our back end, our express back end to
hit and then fetch the data.