Hello so i wanna filter the JSON data so that it show random data using this function, but i encounter error on my variable filteredArray. it says "Property 'filter' does not exist on type 'Dispatch<SetStateAction<Pasangan[]>>'". should i define the filter type? if so how do i do it

what should i do

This is the error code :

    const addPasangan = (newPasangan: Pasangan) => {
            
            if (newPasangan == null) return;
        
            setGebetTarget((temp) => {
              return temp.concat(newPasangan);
            });
            const filteredArray = setPasangan.filter((item: Pasangan) => item !== newPasangan);
            setPasangan(filteredArray);
        };

Full code :
import React, { useState } from "react";
import PasanganContext, {Pasangan} from './Pasangan-context';



const FriendsContextProvider: React.FC = (props) => {
    const [pasangans, setPasangan] = useState<Pasangan[]>([
        {
            id: 'f1',
            name: 'John Thor',
            gender: 'male',
            src: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80'

        },
        {
            id: 'f2',
            name: 'John Doe',
            gender: 'male',
            src: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80'

        },
        {
            id: 'f3',
            name: 'Thoriq',
            gender: 'male',
            src: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80'

        },
        {
            id: 'f4',
            name: 'Queen Tamy',
            gender: 'female',
            src: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80'

        },
        {
    ]);

    const [gebetTarget, setGebetTarget] = useState<Pasangan[]>([]);

    const addPasangan = (newPasangan: Pasangan) => {
        
        if (newPasangan == null) return;
    
        setGebetTarget((temp) => {
          return temp.concat(newPasangan);
        });
        const filteredArray = setPasangan.filter((item: Pasangan) => item !== newPasangan);
        setPasangan(filteredArray);
    };

    const updateFriend = () => {};
    const deleteFriend = () => {};

    return(
        <PasanganContext.Provider value={{
            pasangans,
            gebetTarget,
            addPasangan,
            updateFriend,
            deleteFriend
        }}> 
        {props.children}
        </PasanganContext.Provider>
    );
    };

export default FriendsContextProvider;

CodePudding user response：

Replace setPasangan with pasangans

 const filteredArray = setPasangan.filter((item: Pasangan) => item !== newPasangan);
 setPasangan(filteredArray);
        

to

 const filteredArray = pasangans.filter((item: Pasangan) => item !== newPasangan);
 setPasangan(filteredArray);