How to check if the value of one obj exists in the another obj?-CodePudding

I wanna make follow/unfollow toggle button, and following / follower list(object in array) will be called seperately from server. Follower list needs to have both unfollow/follow button status. When I call follower list, how can I check the IDs of the people who follow me matches the IDs of my following list & reflect in on the button?

example following, follower object in array

[{id: 1, profileImg: xxx},{id: 2, profileImg: xxx},{id: 3, profileImg: xxx}... ]

my code in js below

const {  select } = props;
    const [choice, setChoice] = useState(select);
    const [followingList, setFollowingList] = useState([]);
    const [followerList, setFollowerList] = useState([]);
    

    const handleChoice = (e) => {
        setChoice(e.target.value);
    };
    

    useEffect(() => {
        getFollowing()
            .then((res) => {
                setFollowingList(res);
            })
            .then(
                getFollower().then((res) => {
                    setFollowerList(res);
                }),
            );
    }, []);

my code in html

<Container onClick={(e) => e.stopPropagation()}>
    <TogglebtnContainer>
         <ToggleBtn onClick={handleChoice} value="following" choice{choice}>Following</ToggleBtn>
         <ToggleBtn onClick={handleChoice} value="follower" choice={choice}>Follower</ToggleBtn>
    </TogglebtnContainer>
        <FollowContainer>
          <Follow>
        {choice === 'following'? (followingList.map((follow, idx) => {
        return (
                        <div className="follow-item" key={idx}>
            <div className="follow-img"><img src={follow.profileImg} alt="UserPic" />             </div>
            <div className="follow-name">{follow.nickname}</div>
                <FollowBtn key={follow.id}>Unfollow</FollowBtn></div>
                                            );})
        : (followerList.map((follow, idx) => {
            return (
                <div className="follow-item" key={idx}>
                <div className="follow-img">
                <img src={follow.profileImg} alt="UserPic" />
                </div>
                <div className="follow-name">{follow.nickname}</div>
                <FollowBtn key={follow.id}>follow</FollowBtn>
                </div>
                                               })}
      </Follow>
      </FollowContainer>
      </Container>

I thought I could check if this IDs matches IDs of my following list and create a new boolean state. (ex [isFollowing, setIsFollowing = useState(false)) but couldn't find a way.

getFollower().then((res) => {
    setFollowerList(res);

CodePudding user response：

To know which followers the user is already following and follow/unfollow followers

  short answer, set a flag when loading the data

  useEffect(() => {

      let isValidScope = true;
         
      const fetchData = async () => {

         const followingList =  await getFollowing();
         if (!isValidScope) { return; }

         setFollowingList(followingList);

         let followersList = await getFollower();
         if (!isValidScope) { return; }

         const followingUserIds = followingList?.map(f => f.id)

         followersList = followersList?.map(follower => {
             return followingUserIds?.includes(follower.id) ? 
                     { ...follower, isFollowing: true } : follower
         }

         setFollowerList(followersList)

      }

      fetchData()

      return () => { isValidScope = false }

    }, []);

    const onFollowFollower = (followerId) => {
         const followersList = followerList?.map(follower => {
             return follower.id === followerId ? 
                     { ...follower, isFollowing: true } : follower
         }
         setFollowerList(followersList)
    }

    const onUnfollowFollower = (followerId) => {
        const followersList = followerList?.map(follower => {
             return follower.id === followerId ? 
                     { ...follower, isFollowing: false } : follower
         }
         setFollowerList(followersList)
    }

Render code

<Follow>
        {choice === 'following'? (followingList.map((follow, idx) => {
              return (
                 <div className="follow-item" key={idx}>
                     <div className="follow-img"><img src={follow.profileImg} alt="UserPic" />             </div>
                      <div className="follow-name">{follow.nickname}</div>
                      <FollowBtn key={follow.id}>Unfollow</FollowBtn>
                  </div>
               );})
               : (followerList.map((follow, idx) => {
                     return (
                       <div className="follow-item" key={idx}>
                          <div className="follow-img">
                            <img src={follow.profileImg} alt="UserPic" />
                           </div>
                           <div className="follow-name">{follow.nickname}</div>
                              
                              { follow?.isFollowing ? <FollowBtn () => onUnfollowFollower(follow.id)>Unfollow</FollowBtn> : null }
                               { !follow?.isFollowing ? <FollowBtn onClick={() => onFollowFollower(follow.id)>Follow</FollowBtn> : null }
                       </div>
          })}
    </Follow>

You can read about working with list in the new React docs

if you are refetching the follower and following list on every change it will be better to recalculate the followers list using a useMemo on every change

Hope this helps you in someway