working with user blocking system in react - reactjs

Question

I am making a web app like Tinder. Currently, I am working with user blocking. I have a "blocked" table in the database. In my application, A user already can block another user. Now, I want to hide the users in the search result if the logged user already blocked them.
Here is the code I have. This code renders for infinity (it doesn't stop). Can anyone tell me how can I make it working?
const ListOfUsers = ({ users }) => {
//console.log('users list rendered', users)
var coords = JSON.parse(window.localStorage.getItem('loggedMatchaUser'));
var from_user_id = coords.user_id;
const [check, setCheck] = useState(0)
const checkBlock = (to_user_id) => {
blockService.blockedUser({from_user_id, to_user_id})
.then(res => {
//If this row exist in the table it return 1 otherwise 0
setCheck(res.value);
})
.catch(e => {
console.log(("Error: couldn't get block info"))
})
}
return (
users && users.length > 0
? <ListGroup className="text-left" variant="flush">
{users.map(u => <Link to={`/users/${u.user_id}`} key={u.user_id}>
{checkBlock(u.user_id)}
{!check &&
<ListGroup.Item>
<div style={{display: "inline-block", width: "60%"}}>{u.username}, {u.age.years}</div>
<div style={{display: "inline-block", width: "40%", textAlign: "right"}}>{parseInt(u.distance)} km<br />
<FontAwesomeIcon icon={faAward} /> {u.fame}</div>
</ListGroup.Item>
}
</Link>)}
</ListGroup>
: <div className="text-info">Could not find any matching users<br />please try different filters</div>
)
}

Answer 1

You are issuing a side-effect (i.e. calling a function that updates state) in the render return.
const ListOfUsers = ({ users }) => {
...
const [check, setCheck] = useState(0);
const checkBlock = (to_user_id) => {
blockService
.blockedUser({ from_user_id, to_user_id })
.then((res) => {
//If this row exist in the table it return 1 otherwise 0
setCheck(res.value); // <-- updates state
})
.catch((e) => {
console.log("Error: couldn't get block info");
});
};
return users && users.length > 0 ? (
<ListGroup className="text-left" variant="flush">
{users.map((u) => (
<Link to={`/users/${u.user_id}`} key={u.user_id}>
{checkBlock(u.user_id)} // <-- function call updates state
...
</Link>
))}
</ListGroup>
) : (
...
);
};
You'll likely want to use an effect hook to check blocked users when the users prop updates. You'll need to "preprocess" your users array and augment it with the blocked status, or simply filter them out, which is probably easier anyway. The reason is because you can't use a single check state value for every user being rendered.
const ListOfUsers = ({ users }) => {
const coords = JSON.parse(window.localStorage.getItem("loggedMatchaUser"));
const from_user_id = coords.user_id;
const [nonBlockedUsers, setNonBlockedUsers] = useState([]);
useEffect(() => {
const checkBlock = (to_user_id) =>
// If this row exist in the table it return 1 otherwise 0
blockService.blockedUser({ from_user_id, to_user_id });
Promise.all(users.map(({ user_id }) => checkBlock(user_id))).then(
(blockedUserStatus) => {
const nonBlockedUsers = [];
users.forEach((user, index) => {
if (!blockedUserStatus[index]) nonBlockedUsers.push(user);
});
setNonBlockedUsers(nonBlockedUsers);
}
);
}, [from_user_id, users]);
return nonBlockedUsers.length > 0 ? (
<ListGroup className="text-left" variant="flush">
{nonBlockedUsers.map((u) => (
<Link to={`/users/${u.user_id}`} key={u.user_id}>
<ListGroup.Item>
<div style={{ display: "inline-block", width: "60%" }}>
{u.username}, {u.age.years}
</div>
<div
style={{
display: "inline-block",
width: "40%",
textAlign: "right"
}}
>
{parseInt(u.distance)} km
<br />
<FontAwesomeIcon icon={faAward} /> {u.fame}
</div>
</ListGroup.Item>
</Link>
))}
</ListGroup>
) : (
<div className="text-info">
Could not find any matching users
<br />
please try different filters
</div>
);
};