I have an array of objects which has a structure like this
export const CardContents =[
{
id:1,
brand:'Akko',
product:'Product 1',
img:Icon1,
price:100,
category:'Keycaps'
},
{
id:11,
brand:'Press Play',
product:'Product 1',
img:Icon1,
price:100,
category:'Keycaps'
},
{
id:12,
brand:'Zifriend',
product:'Product 1',
img:Icon1,
price:100,
category:'Keycaps'
},
{
id:2,
brand:'Ajazz',
product:'Product 1',
img:Icon2,
price:100,
category:'Switch'
},
i want to make a sidebar for filtering my filtered array.
so i tried to filter my array by the category and sidebar filter function using this.
const filteredData = CardContents.filter(CardContent => CardContent.category === 'Keycaps')
const [item, setItem] = useState(filteredData)
const menuItems = [...new Set(filteredData.map((content) => content.brand))]
const filterItems = (cat) => {
const newItems = filteredData.filter((newcontent) => newcontent.brand === cat )
setItem(newItems)
}
this is my sidebar
function CategorySidebar({menuItems, filterItems, setItem}) {
return (
<div className="hidden md:flex md:basis-1/3 lg:basis-1/4 flex-col p-2 bg-white rounded-lg self-start sticky top-24">
<h1 className='font-medium mb-2'>
Brand
</h1>
<ul>
{menuItems?.map((content) => (
<li className='mb-1' onClick={() => filterItems(content)}>
<label htmlFor={content.brand} className='flex items-center'>
<input type="checkbox" className='mr-1' />
{content}
</label>
</li>
))}
</ul>
<ul>
<li onClick={() => setItem()}>
<label htmlFor="" className='flex items-center'><input type="checkbox" className='mr-1' />See all</label>
</li>
</ul>
</div>
)
}
but the problem is when i click the category its not working
so how do i filtering my filtered array?
New contributor
Daniel Oscar is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.