How i filter items by category in react

Im trying to filter the list of array of object onClick of the checkbox based on a condition.

My json object:

[
  {
   "id": 1,
   "name": "Apple",
   "price": "2€",
   "isChecked" false,
   "category: {
         "id":"1",
         "name":"Food",
              }
  },
  {
   "id": 2,
   "name": "Banana",
   "price": "3€",
   "isChecked" false,
   "category: {
         "id":"1",
         "name":"Food",
              }
  },
  {
   "id": 3,
   "name": "Phone"
   "price": "2€"
   "isChecked" false,
   "category: {
         "id":"2",
         "name":"Technology",
              }
  },
  {
   "id":"4" ,
   "name": "Shampoo"
   "price": "2€"
   "isChecked" false,
   "category: {
         "id":"2",
         "name":"Personal Care",
              }
  }
]

I tried to checkbox with handleClick but the isChecked property I wrote in json doesn’t work

    import { useState, useEffect } from 'react';
    import card from 'api/cards';
    
    export default function Cards() {
    
        const [cards , setCards] = useState([]);
    
        useEffect(() => {
            setCards(card)
        }, [])
        const handleCheck = () => {
        if (cards.isChecked === true) {
            const handleCheck = cards.filter (
                item => item.category.name === "Food"
                
            )
        }
     else (cards.isChecked === true) {
        const handleCheck = cards.filter (
            item => item.category.name === "Technology"
            
        )
     }
     else (cards.isChecked === true) {
        const handleCheck = cards.filter (
            item => item.category.name === "Personel Care"
            
        )
     }
    }
        
        return (
            <div className="container">
                {cards.map(index => (
                    <span>{index.name}</span>
                    <span>{index.price}</span>
                ))}
            </div>
            <div className="container">
                
                {cards.category.map(i => (
                    <label>{i.name}</label>
                    <input type="checkbox" onClick={handleCheck} />
                ))}
                
            </div>
 
        )
    }

When I check the checkbox according to the category name I want, the object will come, but I could not do it with the code I wrote above.
so i am getting error. How can I do this correctly?

>Solution :

I think you have a problem with handleCheck and you haven’t set cards with your filtered data

You also cannot get category like cards.category because cards is an array (not an object). We can access it via map instead.

import { useState, useEffect } from 'react';
    import card from 'api/cards';
    
    export default function Cards() {
        const [filteredCategories, setFilteredCategories] = useState([]) //keep your filtered category names
        const [cards , setCards] = useState([]);
    
        useEffect(() => {
            setCards(card)
        }, [])
        const handleCheck = (event, item) => {
           if(item.isChecked === false) {
              return //we don't need to have further check for `item`
           }
 
           const categoryName = item.category.name
           const updatedFilteredCategories = event.target.checked ? [...filters, categoryName] : updatedFilteredCategories.filter(currentCategoryName => categoryName !== categoryName)

           const filteredCards = cards.filter(
              item => updatedFilteredCategories.includes(item.category.name)
           ) //always filter cards by category names
           setCards(filteredCards) //set updated cards
           setFilteredCategories(updatedFilteredCategories) //set filtered categories for the next filter rounds
        }
        
        return (
            <div className="container">
                {cards.map(index => (
                    <span>{index.name}</span>
                    <span>{index.price}</span>
                ))}
            </div>
            <div className="container">
                
                {cards.map(item => (
                    <label>{item.category.name}</label>
                    <input type="checkbox" onClick={(event) => handleCheck(event, item)} />
                ))}
                
            </div>
 
        )
    }