Beautiful ones we have access to all the products.
Now let's render our feature products.
In the home page we're gonna have this feature product section and we're gonna head over back to our
application and that of course is not our application that is my desktop that I'm gonna open up the
sidebar and in fact I'm gonna close out again all the tabs and I'm gonna open up first of all the feature
products.
So this guy was having one then we're going to look for the home page let's see where we have the homepage
then also we want to open up the helpers and you're going to see in a second why.
And lastly we're gonna need also a product context so let's also open up the product context and let's
start I guess with home and let's import our feature product.
So we're going to look for import then featured products.
So essentially the products that have featured property of true and currently of course there's only
having one.
So let's look for components then.
Products folder and then we're looking for feature product.
And then right after the hero we're going to render our featured products and now let me now get back
home.
So let's click on home and of course we're going to see hello from feature product.
So let's start working on it.
We're if we're gonna head over to a feature product what are we going to need.
We'll need a product list because I wouldn't want to again set up functionality where I loop over the
project because I already have all the product.
The only thing I need to do is just passing whatever data I would want.
So that's the reason why we're going to import a product list that is sitting right next to say product
list and that is of course within the same folder.
So we're just going to grab a product list and then we're gonna be looking for the product context because
I would want to get to things I'd want to get loading as well as the feature which currently is just
an empty array.
So we're also gonna cheat a little bit.
We're going to work first all the product and then we're gonna set them up as feature men let's import
our product context so let's say import then we're looking for product context and that is coming from
our context.
So let's navigate to folder and the folder name is context and then we're looking for a product like
so.
And then also I would want to get loading because the same way as with product I want to display loading
if I'm still getting my product.
So if Bush still performing fetch request so let's do a loading then from online of course it is coming
from the components like so and that is of course within the same folder meaning one level up but we're
still sitting technically within the components.
All right.
We have our imports now let's set up our used context to get the values from our products context and
remember the syntax was following where we need to decide what we would want from the context.
So in this case I'm looking for two things.
But since my feature is equal to an empty array I'm gonna grab three things.
Eventually there's going to be only two but for now we're gonna grab three.
So we're gonna look for featured as well as the product and all that is coming from react use context
and then I need to pass in my product context.
Now I have access to those three things.
And first we're gonna do the same logic like we did before where if it is loading then we're going to
display our loading component.
So if loading is true then let's render return and then we're going to look for loading I need to set
this up as a component and then of course once I have my product then I would want to return my list
and again eventually we're gonna set up a product list that only renders featured but feature is an
empty array.
So why don't we just start out with all the product.
So I'm going to say all right there's gonna be a return and from return we're gonna go with product
list.
Now in this case since it is a prob I would want a different title I wouldn't want our product known
as a feature product.
So we're going to save feature product and then again we still have the products prop which eventually
is going to be featured.
But again I know I said this seventy seven times since it is an empty array.
I find it more useful if we just passing the product currently just for the time being.
So let's passing the product let's close out our list and then in a home page we're gonna see all the
product.
So now let's start working on the feature product if we're gonna head over to the context I can see
that I haven't used my set feature and the way I would want to do that is once I get my response data
back then I would want to loop over it and just get me the products that have featured set to true and
you could set up functionality right here right here within the context but I just find it a bit more
useful if we're gonna do it within helpers.
So first of all within the helpers we're gonna set up a function and we're going to call this function
feature products and we're going to export it right away.
So export function and the reason why I'm not using export default because there might be some other
functions here.
So let's write featured product.
Product.
And then this particular function is gonna get one parameter.
I'm gonna name this data.
You can name this array.
You can name this product.
It doesn't really matter.
And then it is going to return only the products that have item featured more featured properties set
to true.
So I'm going to say return not return but return then data.
So we're looping over our array.
Then we're going to use a filter method.
And then again we have our callback function where we set up each and every item and I'm gonna name
my parameter item.
So as you can name just whoever you like.
And then I'm only gonna return that item if the feature of properties is true.
So if item that feature is equal to true then we're going to return that particular item.
If the feature property is not true then the item is not going to get returned.
So essentially we're gonna trim our array where we have initially several items which are currently
displayed on average.
What we're looking for less items now we're going to head over to a product context and we're going
to import that particular function.
So we're going to look for import.
Now it is a name the import.
So we have featured products and then it is coming again from Eutelsat.
So we can head over to a utility folder and then we're looking for the helpers.
So that's where this function is coming from.
And then right when we get our data before even we set up the product.
Let me run a feature product on my response data and then I'm going to set up some kind of variable
and I'm going to call this feature but again there's no name clash because we're doing this within a
function.
So even though we have a state value feature it doesn't really matter.
And then we're going to set this equal to a response data that is passed through feature product.
So we have our feature product function and then within the function we need to pass in the.
All right.
So we're going to go with response data.
That is the array that we're passing in and now we're getting back our feature product.
So right after the set product we're gonna run our set feature.
So set featured and then we press in whatever values we have within the featured variable so featured
like so.
And then of course once we run our set featured then now we're setting a feature and state value to
whatever product that have that feature property of true.
And now if we're gonna head over back to feature products instead of accessing the products we're going
to access the feature.
So now I can just delete the products.
I can see that my functionality work but instead of passing an all product into my product list that
is going to loop over my array and passing featured which should get me three or four items.
Let me see.
Yep.
I should have three or four items.
Let's head over back.
This is the project we're working on and then we're going to check our homepage and we have four items.
So each and every item has a feature properly set to true you could have set the functionality differently.
It was my preference to use the product list.
You could have done it.
Of course.
Million different ways.
But I just like the fact that I don't have to deal two times with looping over some kind of error.
So in this case again it doesn't really matter what array we're passing in product list is always going
to do the same thing it is going to grab the title whatever title as well as the array and then it's
going to loop over the array and then render each and every product.
Could you have done it differently.
Of course you could but this was my preference of how to solve the issue where if I need to render the
list two times I'm just going to set up some kind of component that just grabbed that list and then
renders it wherever we are displaying that component.