Okay, so we're almost there.
We've got a few bits to clean up inside our product details page.
Just sort out this button and deal with the details for our product details page.
And back to the components.
And let's do something with the table first of all.
So above the return statement and below the if statement, I'm just going to create a const called products
details.
And I'm going to set it equal to and open up square brackets.
I want this to be an array.
And I'm going to create an object.
And one of the properties is going to be the label.
And I'm going to say name.
And that's going to be for the product name.
And I'm going to give it a value and say product dot name and add a comma and then copy this down four
more times.
The next property will be for the description, and I'll give it a value of product description.
The third one can be for the type, and we'll give the value as the product type.
The fourth one can be for the brand and I'll give it a value of product brand.
And finally we'll have the quantity in stock as the label.
And this of course will be the quantity in stock property.
So the way that we're going to use this, we'll just take the opportunity to loop over each of these
elements in this array and use that to display the table rows that we're going to have inside our table.
So I'll remove that placeholder text and we'll have a table row and we'll open it up.
So we've got children.
And this is going to be what we're looping over.
So we're going to give it a key.
And in fact before the table row we need to open curly brackets and we'll say product details dot map.
And we'll open parentheses.
Open more parentheses.
And I'm going to specify the detail and the index.
Now the detail is going to be the object that we've declared here.
And index is just the index of the elements in the array.
That's what we'll use for the key inside our table.
So I'll just use the arrow and then open up parentheses.
And let's cut our table row and put it inside the curly brackets there.
The thing that we're looping over, because each one of these properties is going to have its own row
in the table.
So we'll give our table row a key because we need to.
It's going to be something that react needs to identify uniquely.
And then for each table row we'll have a table cell and add its closing tag.
And we'll give it a property.
And we'll just use the font weight and set it to be bold.
And this can be for the detail dot label.
And we'll have another table cell below this.
So we'll say table cell.
And we won't give this any properties.
And we'll say detail dot value.
And if we go take a look and see how we're doing, we can see that we've got the details now of our
products.
Great.
But maybe I'd like the font to be a bit bigger for each of these cells inside here.
And let's go take a look at how we can do that.
And if we go up to our table, we can control this at a higher level.
And we'll specify s x equals and double curly brackets.
And inside here we want to target effectively.
So we're using the ampersand.
Then say TD for the table delimiter for each of the table cells.
And then we add a colon and open curly brackets.
And we could specify font size.
And we can set this to one REM a little bit tricky to get this and figure out how to do this.
But if we want to target each of these, what would be in HTML?
This would be a t r and then the table cells would be TDs inside the table row.
So that's what we're targeting here.
Just to increase the font size for each of these rather than specifying it in each one.
It's just really a demonstration of how to target that.
And if we go take a look then we can see the font size has indeed increased from what it was before.
So great.
That's what we're looking for there.
And I just want to deal with this button as well, because I don't like the way it's a different height
to the text field, and I don't know why.
There isn't a way that we can just expand this to match the text field, but there isn't.
So we have to control that manually ourselves.
So let's just adjust the button height as well.
And inside the button let's use the SE property again and we'll give this a height property.
And the text field is 55 pixels in height.
So if we set the height then it should match with the text field.
And indeed it does so great.
Now if we go back to our catalog and we pick a different product, let's pick one of these hats for
instance.
Then we can see the details of the hats.
Marvelous.
That final bit of styling actually brings us to the end of what we're doing inside this section.
This section was mostly about routing, but since we've routed to the product details, we've also taken
the opportunity to style this.
Let's see how it looks in dark mode.
And we can see the colors changing for things like the button.
It makes it a much lighter blue and the text as well, because we're using typography effectively,
then it automatically changes that text as well to a light color instead of a dark color.
So marvelous.
Now we've got the beginnings of our application, and we've got the routing functionality enabled as
well.
Before we go, let's just double check.
I haven't missed anything and we'll take a look at the the Chrome DevTools.
That can be quite worrying, but please do remember if you see a console dev log look like this, that
doesn't mean it's a problem, because hot reload all of these images that we see that's hot module reload.
So we only consider this to be a problem if the problem persists after we refresh the page.
And if the problem does not persist, and we click on a product details and we go back to our catalog
and we click around.
As long as we don't see the persistent problem then it isn't a problem.
It's just hot reload doing its thing as we're making code changes.
Clearly it's trying to load something whilst we're writing code and it's encountering problems, so
it's nothing to worry about on that basis.
So now we've achieved the next milestone.
We've implemented routing in our application.
We'll be using routing all the way through by the way.
So all we've done really in this section is set it up so it's ready for us.
And we'll explore other features of the router as and when we need them in our application.
So let's go back to VS code.
And we're ready to commit our changes into source control.
I'll mention it.
Now these store DB dash m files.
You may see them you may not.
They're just noise that come along with SQLite.
Please ignore them.
You can ignore them and git ignore if you wish to.
I typically am almost blind to these now because I see them so often, but they're meaningless.
They're tiny.
They don't do any harm.
They don't give us any benefit.
They're just something that come along with a SQLite database.
I'm just going to continue, not to worry about them and send them up to GitHub with this commit as
well.
So I'm just going to stage all of the changes and I'm going to say end of section four.
In this case commit the changes.
And we're going to sync this up with GitHub.
And we'll wrap up after this with a summary.