Error: "friends.find is not a function" when using live server but not localhost

Question

describe: Whenever I switch from using localhost as the API endpoint to the actual backend live URL, I get two errors in my React app. Here are the errors I'm getting:

PATCH https://hobby-hunter-api.onrender.com/users/6488a0ab682e930dcd661111/64628638beaa4cc4aecd3a42 404 (Not Found) in Friend.jsx:25

`Uncaught TypeError: friends.find is not a function in Friend.jsx:22

I use MongoDB and Node.js as backend. Appreciate any insights or solutions to resolve this issue. Thanks!

Additional details: If any additional information or code snippets are needed to help diagnose the problem, please let me know.

Friend component code:

import { PersonAddOutlined, PersonRemoveOutlined } from "@mui/icons-material";
import { Box, IconButton } from "@mui/material";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import { setFriends } from "state";

import UserImage from "./UserImage";

const Friend = ({ friendId, name, userPicturePath }) => {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const { _id } = useSelector((state) => state.user);
  const token = useSelector((state) => state.token);
  const friends = useSelector((state) => state.user.friends);

  const isFriend = friends && friends.find((friend) => friend._id === friendId); // Check if the friend exists

  const patchFriend = async () => {
    const response = await fetch(
      `https://weblinkbackendapi.onrender.com/users/${_id}/${friendId}`,
      {
        method: "PATCH",
        headers: {
          Authorization: `Bearer ${token}`,
          "Content-Type": "application/json",
        },
      }
    );
    const data = await response.json();
    dispatch(setFriends({ friends: data }));
  };

  if (!Array.isArray(friends)) {
    return null; // Return null if friends is not an array
  }

  return (
    <Box className="text-black flex mb-2 bg-zinc-200 justify-between items-center rounded-lg z-10 ease-in duration-500">
      <Box className="flex justify-between items-center gap-1">
        <UserImage image={userPicturePath} />
        <Box
          onClick={() => {
            navigate(`/profile/${friendId}`);
            navigate(0);
          }}
        >
          <h2 className="text-black font-medium hover:text-white cursor-pointer p-2 mr-1">
            {name}
          </h2>
        </Box>
      </Box>
      <IconButton
        onClick={() => patchFriend()}
        sx={{ p: "0.05rem", fontSize: "0.25rem" }}
      >
        {isFriend ? (
          <PersonRemoveOutlined sx={{ color: "grey" }} />
        ) : (
          <PersonAddOutlined sx={{ color: "grey" }} />
        )}
      </IconButton>
    </Box>
  );
};

export default Friend;

Answer 1

I ended up adding conditional rendering to the current user's friends functionality patch. The problem occurs when the current user requests itself.