In this React eCommerce website, we are going to learn how to create a code category filter in React JS. This will help us to categorize our products more effectively in our ecommerce website.
This code will allow us to limit the number of products shown on a given category page. We'll also cover how to create a simple-to-understand stateless component in React. This will make understanding and adapting the code to future projects much easier. So if you want to learn how to create a React eCommerce website, then keep watching – you won't regret it!
-------------- TIMILINE-------------- 0:00 Introduction 0:45 Subscriber Target 1:05 Search Placeholder 1:20 Explanation what we need to do 3:20 Common Func. to get unique data 9:00 get Unique Data 10:30 Thank You for 5lakh Subs
************* 😍 Must Watch Videos For Web Development 😍 *************
Hello what's up guys my name is Puneet
Bahadur Thapa and I would like to tell
you guys that today's video is going to be awesome because today we are going to see
Category-wise filters on our React e-commerce website
so now you must be wondering what is this category filter
so guys you can see that in our previous video
we have covered up to here
Where we have improved our search functionality
ok
and this is our grade view list view
our price highest to lowest we have seen everything
so what we have to see today
we have to see the mobile categories
what are the types of mobile
what are the types of laptops
what are the available laptops
what are the available computers
what are the accessories
what are the available watches
So this category-wise feature we are going
to implement it today you can see that we
have already tackled the search so guys now
we will start the video without any delay
but before that thank you so much guys for
5 lakh subscribers now
our next target is 1
million subscribers so guys let's do it and
thanks to all the members
who are supporting us
and guys the playlist is ready so you will not face any problem
so please like share and
subscribe and guys you can see that i have
come to my vscode editor
we have seen till here
and I just realized that
I have not written the search text
So I have written it here
which is not a big deal so I have written search
so guys now you can see
that I can see the search here
perfect my work is done
So today I want to show you the category
but before that guys I want
to show you one thing and
that is can you see
this category guys if you
see in categories so we
have this category mobile
Then we have this category again mobile
there is one more category which is laptop
so what is this guys
this is my array of an object
which is getting my api data
so now
in our first object
the array I have to get the data of the
category then only in
the first object mobile
in the second mobile
in the third my laptop
in the fourth
my mobile so whatever is here
I want mobile laptop
see mobile came three times
but I have to show only once
mobile laptop
so all this unique data I
have to show in the array
and then I have to
show it in the loop and
not only show I have
to fire the event by
which my filter basically my product will
be filtered so we will divide it in two parts
First we will see the
unique data which we are getting
because if I am
running in the company here
also same I am getting
unique data of colors so
for these three we will
create a common functio
By which we will get our
data easily so today we
are going to
see a common
function to get unique
data of an object
meaning a particular property
of a particular object I
mean we need so see guys
you already know this is
my search functionality
here I am running later
we will see
how we can sort
so I am writing here
we need unique data
let's say const
and I want category
so const category
will be equal to and
let's go with category
data or category
only data you can
write anything
perfect now I am creating a common function
which is
get unique data
and this is it in
unique data
all the data
is in an API and all the data of our API
if you see carefully
it is in all products
also in filter products
it is in two places
but in filter
products all the
data i am
displaying here and
all products data
i am displaying
here so this
data i will copy
First I will
import you
need to give a comma
and here I will pass
it after that
now I have
all the data
now I need
to tackle this category
field you can see I
am copying this string
Let's go here as in the
second argument I am passing
the category so my first argument is all the data of the
API then in the second
argument I have
passed the value
of that particular field
basically name now I will
write topic
to get the unique
you can write anything
unique data of each field
so like this
it is very simple
let me zoom a little
so you can see clearly
so we have a const
and then get unique it
should be
automatic i am
using fat arrow function
that's why you can see
like this these two
arguments i can
tackle easily
so let's go
with data and second one is data
so here you
can write property
Let's go with property
doesn't matter now I
need to loop this data
and get data of that
property you can't imagine
how simple it is so
let new value basically
I am writing new value
will be equal
to data map
and when I will run map
I will get value of that
particular field so in
map in this
way fat arrow
function here obviously
current element id is not
necessary return and the
my current element is
in that I have already
one string so in that
string my
current element
if I pass string in
this way then
I will get
value of that field let
me show you
lg new value
and let's run this is
my data i
am running
on inspect and
boom guys see i
am getting array see
I got my data so
easily you can do one more
thing
if you write
only category then
it won't work because
we didn't pass any category you can
do like this and the
You have to remove
this and do not category
category
if you do
it this way
I am showing you
you can see
I am getting data
I am running
unique you can see
unique
and data
The problem is that I
have to run the same function for
the company
same for the
colors here I
didn't leave any way
that tomorrow if I have
to run for the second
company then
I have to run
Same function for
the company if I
do like this you can see I
am getting
company but it's not
right I am getting
loss that's why I
am removing all here
I am using
this simple this
is my array I
am passing it
which I need
data simple I am
showing you
second
approach now
The problem
is to see
Suppose I have 12 data objects
The first one is mobile
the second one is mobile
the third one is mobile
I need unique data
It's very simple
what you need to do
new value
ew val will
be equal
to square bracket
dot write new you
have to set data
structure you have to
pass parenthesis and
pass new val now i want to keep console
save now I
have only
unique values mobile
laptop
computer watch
unique one more thing
I am getting all value
where will I get all
here I am not
getting all
I hope you can see
to get all
you can't think
it's very simple
you have to add a comma
because first data of array and
remaining data
of spread
operator we are
passing unique value and
i am getting
all i think
perfect see
easily mobile
laptop computer watch
this is it i
have created
unique function
we can obtain
see how to
show click
filter
see
