Without reloading component in place I'm going to close all the times that I have currently open mike.
So and in this video we're going to work on product list.
So we're going to render our whole list.
And also we're gonna set up a single product.
So first of all let me open up the product list.
That of course is the list that we're rendering within the product page.
And then also we're gonna need a product because what's gonna happen is that within the products list
we're gonna loop over or map over our array of products.
All right.
And then once we do that we're gonna render for each and every product our product component.
You know though before we start working on a product list within the product pages I don't think I would
want to render the product and delete it.
So that way might console is not overpopulated.
So let me close the product page and then let's start working in the product list.
And first I would want to import a product which again is just gonna be a one from and then of course
since it is sitting within the same folder we just grab our product.
Now also let me close the sidebar so have more real estate and I have my product list function.
And like we covered in the previous video we're going to have two props.
We're going to have a title prop so whatever the heading to is going to be for our section and then
the second one is whatever data we're gonna be passing.
And again in this case we're passing in all the products in the feature product.
We're just gonna passing the product that have the featured properties set true.
And then of course we're not going to just return having one.
There is gonna be a section and then within a section we're gonna have a hearing to too.
And this is gonna be a class name of title.
So let's add a class name gonna set it equal to section title and then we're going to access our title.
What's the reason why we're passing in the prop because for every time we're going to render the product
list we would want to set some kind of title and also let's add a class name for the whole section as
well.
And the last name is somewhat simple.
We'll just have a section then right after the heading we're gonna have our div.
We're gonna have a div with a class name of products center and then within this div.
Like I said we're going to map over the product prompt as we're getting back which essentially is always
gonna be an array and I'm gonna say product map.
So let's map over the array and then we'll get a callback function callback function is applied for
each and every item in the array and an parameter in a callback function we can assign some kind of
value to each and every item and in my case I'm just gonna name my parameter item but just please keep
in mind you can name this orange it doesn't really matter.
So I'm gonna say item then within my callback function for each and every item I would want to return
a product component product component and then I need to set up to props I need to have a key prop since
when we're dealing with lists in react we need to have this problem and this needs to be a unique value.
And each and every item does have the I.D. property and by the way we can always check that if we check
whatever data we're getting back this is gonna be essentially each and every product and product is
going to have the idea.
All right then let's head over backward passing and hardy and then we have multiple ways how we can
pass it and you can access property by property because the properties we're looking for is going to
be again the I.D. the title the price as well as the image.
Now image is going to be a bit nested but regardless it's going to work the same way or my preferred
method is just using the spread operator for the object so we can say dot dot dot and then item.
So in this case I'm passing in all the properties that I have within that particular item into my product
component.
I just find it a bit easier to manage.
So let's close it out and then if everything is correct we're gonna have a product and then we're just
gonna have a bunch of hellos and when I say bunch of course I mean 7 where for each and every product
currently since we haven't started working with whatever props we're passing in from our item that's
the reason why we have a hello product.
But let's change that.
We're gonna head over to a product and let's start working on it.
First of all we need to decide well what kind of properties are we going to be looking for.
So we need to decide what kind of properties we're looking for from our product object and if we head
over to a finished product I can see that I'm going to need a image I'm gonna need a title I'm gonna
need also a price but in order to display a single product in order to navigate to that page and get
that particular information I also gonna need an I.D..
So those are the four things we need.
We need image title I.D. and price.
And again whenever we set up with dot dot dot.
So the objects per operator we have access to all the properties.
So essentially what you're getting within your props is anything that is within that object you want
the idea just get the I.D. property you want a title get a title and hopefully you get the gist.
So I'm gonna head over back to the product and then I'm going to say that I would like to access a few
properties and I'm gonna go with image.
Our image is going to be a little bit difficult because it is nested.
So first of all I'm gonna get the image but we're gonna do a little bit more than I'm going to say title
then I'm gonna say the I.D. and then I'm gonna say price and I know I already said this but the reason
why we can right away access all these values is because we were using this object spurt operator where
I'm just saying you know whatever properties this object has passed it in as props.
And that's the reason why we can right away access them here as well.
And let me assign right now my image to where you are.
Because if again we're gonna check our project our finished project and the data we're getting back
we can see that we have the image property but we're not accessing right away the image in fact the
image is sitting within the image and then you are well and if you're wondering why this structured
is set up this way.
The simple answer is strappy that's how strappy sets up the data.
So in this case it's not me who came up with the structure in fact it is trapped but since I don't want
you to refactor the application once you set up to your own back and that's the reason why we're going
to use the same structure as strappy does.
So we're looking for image and then the property name is euro.
And this is where we're gonna get our image and by the way it can just open up and you're going to see
that of course this is the image which by the way is provided by Claude Marie the accountant we're going
to set up a little bit later so what I'm gonna do is I'm gonna say let and you're not I can use also
concept concept you are L is equal to an image since it is an object I'm just gonna access the URL and
now let's set up our whole product.
So instead of the heading One we're gonna have an article to go and then the classes for the article
are gonna be product.
So we're gonna go with product and then within the product first I would want to show the image.
So let me head over back to home page and then show you.
So we're first going to have the image but then within the image container we're also gonna have our
link.
So right before we start working on the rest of our Jess ex let's also import a link from reactor order
down because we would want to navigate that specific page.
So let's say react around or down and then we're gonna have our image container.
So I am G Dana and then within this image container we're going to have first of all the image.
Now the source is gonna be the URL so you can access image that you are all that is gonna be our source.
And then let's also write a way for alternative set up title.
Let's say that a name is going to be the title of our image and then within the image container we're
also gonna set up our link.
So we're gonna have a link.
And now we need to set up this dynamically because previously when we did we said OK.
So navigate to let's say product or navigate home.
However in this case each and every link is gonna be unique because each and every time I'm going to
open up the link within my product it's going to navigate to a single product page but with different
ideas and that way of course we're gonna show that info.
So in order to set that one up we're gonna have to have the curly versus first.
Then we're going to use the template strings and we're going to say the URL is gonna be products.
In this case as you see you had a proper list and then we want to access that particular idea.
So I'm going to say here get me I.D. of that product and let me just quickly double check whether within
the product details we're still active thing I do.
Yes we are.
So that where you're gonna be able to see that we are correctly accessing each and every unique product.
So let me set up product forward slash I.D..
So now in this case each and every time we're going to navigate to a unique page because our ideas are
gonna change for each and every product and also let's add some class names.
So let's say a class name BD n BD and primary and we're gonna have a product link like so.
Let me close out my link component or you know what I need to write details and details then we close
out our link and then write right outside the div we're going to create another def so don't created
within the image container there's gonna be two divs one for image container and the second one for
the footer and then within footer we're just gonna display the title on price so let's go with Def the
class name is gonna be product footer product water and then within a day we're gonna have a title.
So paragraph with a product title and the text is gonna be our title.
So whatever title prop we got from our product list.
The second one is gonna be a price.
So let's go with another paragraph.
And then in this case the class name is product price and then the price we're gonna pass in as our
prop again.
So we're gonna access the variable and then the variable we're looking for his price.
And I'm just gonna add here dollars then let's save it.
Now we should have all these products here displayed.
I'm gonna head over to a bigger browser window just to show that of course in the home page we're not
displaying anything correct like because we haven't set up our feature products but if we navigate to
a product page we're gonna see all the product.
And if we're going to start navigating to a single product page not just now the idea is nine.
If I'm gonna navigate back and if I'm going to check now this guy is gonna have the idea of 10 and this
way we set up our product list we render each and every product.
And of course we also render this single product.
We haven't set up the functionality yet in that component but we can clearly see that we're accessing
a unique product each and every time we navigate to a product page.