I try to display the list of followers and followings on the profile of the users using their id, when I implement there is only the list of followers and followings of the current user that is connected, even if I follow the profile of another user My Component

import React, { useState } from "react";
import { useSelector } from "react-redux";
import { Link, useParams } from "react-router-dom";
import Modal from "../Components/Log/Modals";
import { isEmpty } from "../Components/Utils";
import FollowHandler from "./FollowHandler";

const FollowingPopup = ({ followerId, type }) => {
    const userData = useSelector((state) => state.userReducer);
    const [Opening, setOpening] = useState(false);
    const { id: userId } = useParams();

    const [followingsPopup, setFollowingsPopup] = useState(false);



    const usersData = useSelector((state) => state.usersReducer);




    return (
        <Modal open={!Opening} onClick={() => setOpening(Opening)}>
            <span
                onClick={() => setOpening(!Opening)}
                className="followers__modal__close"
            ></span>
            <header className="followers__modal__header">
                <button
                    className="followers active-followers"
                >
                    Mes Abonnements
                </button>
            </header>

            {/**Les personnes suivis par l'utilsateur */}
            {!followingsPopup && (
                <>
                    <div className="followers__modal__content">
                        <ul>

                            {userId ? (usersData.map((user) => {

                                let follower = user.follower.map((users) => users.followerId)
                                for (let i = 0; i < usersData.length; i  ) {

                                    if (user.id !== userId && follower.includes(user.id)) {
                                        return (
                                            <li key={user.id} className="followers__modal__followers">
                                                <a
                                                    href={`/${user.id}`}
                                                    className="followers__modal__followers__links"
                                                >
                                                    <img src={user.picture} alt="" />
                                                    <h4>{user.firstname   " "   user.lastname} </h4>
                                                </a>
                                                {user.id !== userData.id ? < FollowHandler followerId={user.id} type={'suggestion'} /> : null}
                                            </li>
                                        );
                                    }
                                }

                                return null;
                            })) : null}


                        </ul>
                    </div>
                </>
            )}{" "}
            {/**Les personnes abonnés à l'utilsateur */}

        </Modal>
    );
};

export default FollowingPopup;

this code works perfectly and I manage to display the list of followers of current user who is logged in but when I click on the profile of another user, the same list of followers of the user who is logged in is displayed too, not the selected profile

[

CodePudding user response：

Your for loop is unnecessary there. This might be working for you but without a sandbox to test it's hard to tell.

const userFollowers =usersData.find(user=>user.id===userId).followers.map(follower=>follower.id);
usersData.map(user=>{
 if(userFollowers.includes(user.id)){
return (
    <li key={user.id} className="followers__modal__followers">
                                                <a
                                                    href={`/${user.id}`}
                                                    className="followers__modal__followers__links"
                                                >
                                                    <img src={user.picture} alt="" />
                                                    <h4>{user.firstname   " "   user.lastname} </h4>
                                                </a>
                                                {user.id !== userData.id ? < FollowHandler followerId={user.id} type={'suggestion'} /> : null}
                                            </li>
)
})