I'm creating an e-commerce website where I show 3 options "body lotion", "body wash" and "body scrub" the customer can click on any of these options, and the respective product shows up.
I have the products stored in the "U20Arr" and a "type" object key specifying whether it's of type body lotion or body wash or a body scrub
can somebody please help me on how do I filter out the products based on the category /type
the code of the same where at present I'm displaying all the products
import React from 'react'
import u20bg from "../assets/u20bg.png";
import "../styles/Under20.css";
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbSeparator,
} from '@chakra-ui/react'
import { ChevronRightIcon } from '@chakra-ui/icons';
import { Link } from 'react-router-dom';
import filterBtn from "../assets/filterBtn.png";
import sortBtn from "../assets/sortBtn.png"
import { useState } from 'react';
const Under20 = () => {
const [filter, SetFilter] = useState(false);
const [sort, SetSort] = useState(false);
const filterShowHandler = () => {
SetFilter(!filter)
}
const toggleSortHandler = () => {
SetSort(!sort)
}
var u20arr = [
// body wash
{
id: "43",
name: "NATURAL LEMON BODY WASH",
price: 18,
type: "bodywash",
primaryImage: "https://cdn.shopify.com/s/files/1/0081/7374/8305/products/NB_ScalpScrub200mlTube_200mL_02_large.jpg?v=1654006879",
hoverImg: "https://cdn.shopify.com/s/files/1/0081/7374/8305/products/NO_Lists_for_Site-SIG_3ec6e6c0-aee5-483d-a6c9-e4abab736fd7_large.png?v=1654006879",
stars: 4,
descr: "Our Scalp Scrub removes product build up and impurities with a refreshing blend of Peppermint & Ginger Extract. "
},
{
id: "44",
name: "NATURAL STRAWBERRY BODY WASH",
price: 15,
type: "bodywash",
primaryImage: "https://cdn.shopify.com/s/files/1/0081/7374/8305/products/NB_Leave-InConditioner_250ml_02_large.jpg?v=1654006878",
hoverImg: "https://cdn.shopify.com/s/files/1/0081/7374/8305/products/NaturalBalance_7be6d9d2-0387-44f2-9949-b03a344fc044_large.jpg?v=1654006878",
stars: 5,
descr: "Our Scalp Scrub removes product build up and impurities with a refreshing blend of Peppermint & Ginger Extract. "
},
{
id: "45",
name: "NATURAL STRAWBERRY BODY WASH",
price: 11,
type: "bodywash",
primaryImage: "https://cdn.shopify.com/s/files/1/0081/7374/8305/products/TravelPack2019_large.jpg?v=1652797301",
hoverImg: "https://cdn.shopify.com/s/files/1/0081/7374/8305/products/TravelPack2019_large.jpg?v=1652797301",
stars: 5,
descr: "Our Scalp Scrub removes product build up and impurities with a refreshing blend of Peppermint & Ginger Extract. "
},
// body loption
{
id: "46",
name: "NATURAL BLUEBERRY BODY LOTION",
price: 15,
type: "bodyLotion",
primaryImage: "https://cdn.shopify.com/s/files/1/0081/7374/8305/products/CreamyBodyWash500ml_large.jpg?v=1649168513",
hoverImg: "https://cdn.shopify.com/s/files/1/0081/7374/8305/products/CreamyBodyFinal_large.jpg?v=1649168513",
stars: 5,
descr: "Our Scalp Scrub removes product build up and impurities with a refreshing blend of Peppermint & Ginger Extract. "
},
{
id: "47",
name: "NATURAL KIWI BODY LOTION",
price: 19,
type: "bodyLotion",
primaryImage: "https://cdn.shopify.com/s/files/1/0081/7374/8305/products/Biomarine_Facial_Serum_02_FOR_WEB_large.jpg?v=1646144556",
hoverImg: "https://cdn.shopify.com/s/files/1/0081/7374/8305/products/MicrosoftTeams-image_5_-SMALL_large.jpg?v=1646144556",
stars: 5,
descr: "Our Scalp Scrub removes product build up and impurities with a refreshing blend of Peppermint & Ginger Extract. "
},
{
id: "48",
name: "NATURAL AVACODA BODY LOTION",
price: 14,
type: "bodyLotion",
primaryImage: "https://cdn.shopify.com/s/files/1/0081/7374/8305/products/Hydra_Eye_Gel_15ml_Tube_02_FOR_WEB_large.jpg?v=1646144555",
hoverImg: "https://cdn.shopify.com/s/files/1/0081/7374/8305/products/MicrosoftTeams-image_5_-SMALL_533a775e-6e81-48de-bafa-6250300a0219_large.jpg?v=1646144555",
stars: 5,
descr: "Our Scalp Scrub removes product build up and impurities with a refreshing blend of Peppermint & Ginger Extract. "
},
//// bodyScrub
{
id: "49",
name: "EXFOLIATING JELLY SCRUB",
price: 19,
type: "bodyScrub",
primaryImage: "https://cdn.shopify.com/s/files/1/0081/7374/8305/products/Brightening_JellyExfoliator125ml_02_large.jpg?v=1629210220",
hoverImg: "https://cdn.shopify.com/s/files/1/0081/7374/8305/products/NO_Lists_for_Site_BRIGHTENING_451cbd3f-1e8b-446a-a45e-61cc31826f69_large.jpg?v=1629210220",
stars: 5,
descr: "Our Scalp Scrub removes product build up and impurities with a refreshing blend of Peppermint & Ginger Extract. "
},
{
id: "50",
name: "EXFOLIATING APPPLE SCRUB",
price: 9,
type: "bodyScrub",
primaryImage: "https://cdn.shopify.com/s/files/1/0081/7374/8305/products/Brightening_IlluminatingMoisturiser60ml_02_large.jpg?v=1629210218",
hoverImg: "https://cdn.shopify.com/s/files/1/0081/7374/8305/products/NO_Lists_for_Site_BRIGHTENING_cf1ff5a7-5a32-4bb0-a7ce-be69ccc9fcf0_large.jpg?v=1629210219",
stars: 5,
descr: "Our Scalp Scrub removes product build up and impurities with a refreshing blend of Peppermint & Ginger Extract. "
},
{
id: "51",
name: "EXFOLIATING KIWI SCRUB",
price: 16,
type: "bodyScrub",
primaryImage: "https://cdn.shopify.com/s/files/1/0081/7374/8305/products/Bergamot_PachouliBodyWash500mL1000x1000x144_large.jpg?v=1637072534",
hoverImg: "https://cdn.shopify.com/s/files/1/0081/7374/8305/products/Bergamot_PachouliBodyWashpumpLifestyle1000x1000x144_large.jpg?v=1637072534",
stars: 5,
descr: "Our Scalp Scrub removes product build up and impurities with a refreshing blend of Peppermint & Ginger Extract. "
},
]
return (
<div className='u20MainParent'>
<p className=' bg-white z-50 relative w100vw'> </p>
<div className='u20Hold'>
<img src={u20bg} className="u20Pic" />
</div>
<div className='u20HeadingHold gap-20 justify-center relative flex flex-col'>
<p className='u20Heading'> Under $20 </p>
<p className='u20Desc'> Shop Sukin natural and vegan collection of skincare and hair care gifts under $20.</p>
</div>
<div className='u20BreadCrumbHold absolute text-sm'>
<Breadcrumb spacing='8px' separator={<ChevronRightIcon />}>
<BreadcrumbItem>
<Link to={`/`}>Home</Link>
</BreadcrumbItem>
<BreadcrumbItem>
<Link to={`/`}>Under 20</Link>
</BreadcrumbItem>
</Breadcrumb>
</div>
<div className='filterSortHold flex flex-row gap-8 absolute text-left'>
<img src={filterBtn} className=" w-36 cursor-pointer scale" onClick={filterShowHandler} />
<img src={sortBtn} className=" w-36 cursor-pointer scale" onClick={toggleSortHandler} />
</div>
<div className='filterOptionsHold relative'>
{filter && <div className='flex rounded-xl gap-8 flex-col boxSh fof absolute '>
<p className='ml-10 cursor-pointer'> Body Lotion</p>
<p className='ml-10 cursor-pointer'> Body Scrub </p>
<p className='ml-10 cursor-pointer text-white' > Body Wash </p>
</div>}
</div>
<div>
<div className='sortOptionsHold relative'>
{sort && <div className='flex rounded-xl flex-col gap-7 boxSh2 fof absolute'>
<p className='ml-20 cursor-pointer'> A - Z </p>
<p className='ml-20 cursor-pointer'> Z - A </p>
<p className='ml-10 cursor-pointer'> LOW TO HIGH </p>
<p className='ml-10 cursor-pointer text-white'> HIGH TO LOW </p>
</div>}
</div>
</div>
<div className='flex gap-20 flex-wrap relative top-96 justify-center text-center'>
{u20arr.map((item) => {
return (<div key={item.id}>
<img src={item.primaryImage} className="w-32" />
<p> ${item.price} </p>
</div>)
})}
</div>
</div >
)
}
export default Under20
CodePudding user response：
For filtering you can utilize filter function, something like this:
const u20arr = [......];
const bodyLotionProducts = u20arr.filter(product => product.type === 'bodyLotion')
then you can use bodyLotionProducts in your JSX element
CodePudding user response：
To Avoid re-computation for the filtered element it is advisable to memorized the value and to do that you used useMemo hook
...
const bodyLotionCategory = React.useMemo(()=> {
u20arr.filter(({type}) => type === 'bodyLotion')
},[u20arr])
...
CodePudding user response：
What do you think about a reduce?
// useMemo will avoid filtering it several times
const u20GroupedByType = useMemo(() => u20arr
.reduce((acc, current) => {
// ||= set the value only if acc[current.type] is not defined
acc[current.type] ||= []
acc[current.type].push(current)
return acc
}, {}), [u20arr])
And the result looks like:
{
bodywash: [
{
id: '43',
name: 'NATURAL LEMON BODY WASH',
price: 18,
type: 'bodywash',
primaryImage: 'https://cdn.shopify.com/s/files/1/0081/7374/8305/products/NB_ScalpScrub200mlTube_200mL_02_large.jpg?v=1654006879',
hoverImg: 'https://cdn.shopify.com/s/files/1/0081/7374/8305/products/NO_Lists_for_Site-SIG_3ec6e6c0-aee5-483d-a6c9-e4abab736fd7_large.png?v=1654006879',
stars: 4,
descr: 'Our Scalp Scrub removes product build up and impurities with a refreshing blend of Peppermint & Ginger Extract. '
},
{
id: '44',
name: 'NATURAL STRAWBERRY BODY WASH',
price: 15,
type: 'bodywash',
primaryImage: 'https://cdn.shopify.com/s/files/1/0081/7374/8305/products/NB_Leave-InConditioner_250ml_02_large.jpg?v=1654006878',
hoverImg: 'https://cdn.shopify.com/s/files/1/0081/7374/8305/products/NaturalBalance_7be6d9d2-0387-44f2-9949-b03a344fc044_large.jpg?v=1654006878',
stars: 5,
descr: 'Our Scalp Scrub removes product build up and impurities with a refreshing blend of Peppermint & Ginger Extract. '
},
{
id: '45',
name: 'NATURAL STRAWBERRY BODY WASH',
price: 11,
type: 'bodywash',
primaryImage: 'https://cdn.shopify.com/s/files/1/0081/7374/8305/products/TravelPack2019_large.jpg?v=1652797301',
hoverImg: 'https://cdn.shopify.com/s/files/1/0081/7374/8305/products/TravelPack2019_large.jpg?v=1652797301',
stars: 5,
descr: 'Our Scalp Scrub removes product build up and impurities with a refreshing blend of Peppermint & Ginger Extract. '
}
],
bodyLotion: [
{
id: '46',
name: 'NATURAL BLUEBERRY BODY LOTION',
price: 15,
type: 'bodyLotion',
primaryImage: 'https://cdn.shopify.com/s/files/1/0081/7374/8305/products/CreamyBodyWash500ml_large.jpg?v=1649168513',
hoverImg: 'https://cdn.shopify.com/s/files/1/0081/7374/8305/products/CreamyBodyFinal_large.jpg?v=1649168513',
stars: 5,
descr: 'Our Scalp Scrub removes product build up and impurities with a refreshing blend of Peppermint & Ginger Extract. '
},
{
id: '47',
name: 'NATURAL KIWI BODY LOTION',
price: 19,
type: 'bodyLotion',
primaryImage: 'https://cdn.shopify.com/s/files/1/0081/7374/8305/products/Biomarine_Facial_Serum_02_FOR_WEB_large.jpg?v=1646144556',
hoverImg: 'https://cdn.shopify.com/s/files/1/0081/7374/8305/products/MicrosoftTeams-image_5_-SMALL_large.jpg?v=1646144556',
stars: 5,
descr: 'Our Scalp Scrub removes product build up and impurities with a refreshing blend of Peppermint & Ginger Extract. '
},
{
id: '48',
name: 'NATURAL AVACODA BODY LOTION',
price: 14,
type: 'bodyLotion',
primaryImage: 'https://cdn.shopify.com/s/files/1/0081/7374/8305/products/Hydra_Eye_Gel_15ml_Tube_02_FOR_WEB_large.jpg?v=1646144555',
hoverImg: 'https://cdn.shopify.com/s/files/1/0081/7374/8305/products/MicrosoftTeams-image_5_-SMALL_533a775e-6e81-48de-bafa-6250300a0219_large.jpg?v=1646144555',
stars: 5,
descr: 'Our Scalp Scrub removes product build up and impurities with a refreshing blend of Peppermint & Ginger Extract. '
}
],
bodyScrub: [
{
id: '49',
name: 'EXFOLIATING JELLY SCRUB',
price: 19,
type: 'bodyScrub',
primaryImage: 'https://cdn.shopify.com/s/files/1/0081/7374/8305/products/Brightening_JellyExfoliator125ml_02_large.jpg?v=1629210220',
hoverImg: 'https://cdn.shopify.com/s/files/1/0081/7374/8305/products/NO_Lists_for_Site_BRIGHTENING_451cbd3f-1e8b-446a-a45e-61cc31826f69_large.jpg?v=1629210220',
stars: 5,
descr: 'Our Scalp Scrub removes product build up and impurities with a refreshing blend of Peppermint & Ginger Extract. '
},
{
id: '50',
name: 'EXFOLIATING APPPLE SCRUB',
price: 9,
type: 'bodyScrub',
primaryImage: 'https://cdn.shopify.com/s/files/1/0081/7374/8305/products/Brightening_IlluminatingMoisturiser60ml_02_large.jpg?v=1629210218',
hoverImg: 'https://cdn.shopify.com/s/files/1/0081/7374/8305/products/NO_Lists_for_Site_BRIGHTENING_cf1ff5a7-5a32-4bb0-a7ce-be69ccc9fcf0_large.jpg?v=1629210219',
stars: 5,
descr: 'Our Scalp Scrub removes product build up and impurities with a refreshing blend of Peppermint & Ginger Extract. '
},
{
id: '51',
name: 'EXFOLIATING KIWI SCRUB',
price: 16,
type: 'bodyScrub',
primaryImage: 'https://cdn.shopify.com/s/files/1/0081/7374/8305/products/Bergamot_PachouliBodyWash500mL1000x1000x144_large.jpg?v=1637072534',
hoverImg: 'https://cdn.shopify.com/s/files/1/0081/7374/8305/products/Bergamot_PachouliBodyWashpumpLifestyle1000x1000x144_large.jpg?v=1637072534',
stars: 5,
descr: 'Our Scalp Scrub removes product build up and impurities with a refreshing blend of Peppermint & Ginger Extract. '
}
]
}