Undefined function in React

Question

I am having an error: Cannot read properties of undefined reading((Id)).

 const PostWidget = ({
    postId,
    postUserId,
    name,
    description,
    location,
    picturePath,
    userPicturePath,
    likes,
    comments,
  }) => {
    const [isComments, setIsComments] = useState(false);
    const dispatch = useDispatch();
    const token = useSelector((state) => state.token);
    const loggedInUserId = useSelector((state) => state.user._id);
    const isLiked = Boolean(likes[loggedInUserId]);
    const likeCount = Object.keys(likes).length;
  
    const { palette } = useTheme();
    const main = palette.neutral.main;
    const primary = palette.primary.main;
  
    const patchLike = async () => {
      const response = await fetch(`http://localhost:3001/posts/${postId}/like`, {
        method: "PATCH",
        headers: {
          Authorization: `Bearer ${token}`,
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ userId: loggedInUserId }),
      });
      const updatedPost = await response.json();
      dispatch(setPost({ post: updatedPost }));
    };

The error is generated from const isLiked = Boolean(likes[loggedInUsrId]) which checks for a truthy value if an array of userId liked a post before it gets rendered on the home page.

I expected it to show my homepage and its corresponding output/logic but instead got this from my developer console:

Is it possible there is a typo in your code? The error message would only make sense if the problematic line was `const isLiked = Boolean(likes[loggedInUser.Id]);` (notice the period). — Tomáš Hübelbauer, Jan 20 '23 at 19:27
+1 for what @TomášHübelbauer said, can you post the structure of the `likes` object? Is it also possible that Boolean(likes[loggedInUserId]) isn't populated/created when the function is run? — Kilbo, Jan 20 '23 at 19:43

score 0 · Answer 1 · answered Jan 22 '23 at 10:45

0

the error is occurring because you are checking for a truthy value on an array of user ids, by using an index which also consists of the userId.

Imagine you have three likes as follows:

const likes = ["user1Id", "user2Id", "user3Id"];

now if the logged in user is user1, when you write:

const isLiked = Boolean(likes[loggedInUserId]);

it is effectively Boolean(likes["user1Id"]).

Of course, this index does not exist, you only have three indices, 0, 1 and 2.

What you could do is try to find the userId in the array, and if it exists then its truthy, if not, it's falsy, like:

const isLiked = likes.find((userId) => userId === loggedInUserId);

answered Jan 22 '23 at 10:45

Scott Mitchell

154
5

Now i am getting a new error of "cannot read properties of undefined (reading: find) – olamide Jan 22 '23 at 14:40
Have you console logged `likes` to make sure there are values present when the component renders? If the values are not present on first mount, you will also get undefined. In which case, you can set isLiked as a state variable, and set it in a `useEffect` only when `likes` values are present. – Scott Mitchell Jan 22 '23 at 15:05
Scott pls are you on discord so you can work me through via a call where i can share my screen with you. I would really appreciate it because i know I will learn something new – olamide Jan 22 '23 at 15:25

Undefined function in React

1 Answers1