About comment Section...

[RajatShinde3]

Hi Dear Sir
I am Rajat Shinde i want a solution about when i use your code to see how the comment section works then I got a problem which is

Uncaught TypeError: comments.map is not a function at Comments (Comments.js:102:1) at renderWithHooks (react-dom.development.js:16175:1) at updateFunctionComponent (react-dom.development.js:20387:1) at beginWork (react-dom.development.js:22430:1) at HTMLUnknownElement.callCallback (react-dom.development.js:4161:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:4210:1) at invokeGuardedCallback (react-dom.development.js:4274:1) at beginWork$1 (react-dom.development.js:27405:1) at performUnitOfWork (react-dom.development.js:26513:1) at workLoopSync (react-dom.development.js:26422:1)

please help to figure out my problem
the comment is boolean or an array in the useState hook...

Thanks in Advance... Sir

[ihtasham42]

Before you do comments.map, add a ``comments &&` to check if the comments array exists.

[ihtasham42]

Could I see the additional code you have implemented as well?

[RajatShinde3]

I am not implemented additional code only i check for comments from backend to frontend
Thanks for that...

[RajatShinde3]

Where Should I Write comments && in the below code pls help me...

i am getting the below error

These are our comments.js

import { Stack, Typography } from "@mui/material";
import { Box } from "@mui/system";
import React, { useEffect, useState } from "react";
import Comment from "./Comment";
import Loading from "./Loading";
import { getComments } from "../api/Comment";
import { useParams } from "react-router-dom";
import CommentEditor from "./CommentEditor";
const Comments = () => {
  const [comments, setComments] = useState(null);
  const [rerender, setRerender] = useState(false);
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);
  const params = useParams();
  const fetchComments = async () => {
    const data = await getComments(params);
    if (data.error) {
      setError("Failed to fetch comments");
    } else {
      setComments(data);
    }
  };
  useEffect(() => {
    fetchComments();
  }, []);
  const findComment = (id) => {
    const recurse = (comment, id) => {
      if (comment._id === id) {
        return comment;
      } else {
        for (let i = 0; i < comment.children.length; i++) {
          const commentToSearch = comment.children[i];
          return recurse(commentToSearch, id);
        }
      }
    };
    for (let i = 0; i < comments.length; i++) {
      const comment = comments[i];
      const returnedComment = recurse(comment, id);
      if (returnedComment) {
        return returnedComment;
      }
    }
  };
  const removeComment = (removedComment) => {
    if (removedComment.parent) {
      const parentComment = findComment(removedComment.parent);
      parentComment.children = parentComment.children.filter(
        (comment) => comment._id !== removedComment._id
      );
      setRerender(!rerender);
    } else {
      setComments(
        comments.filter((comment) => comment._id !== removedComment._id)
      );
    }
  };
  const editComment = (editedComment) => {
    if (editedComment.parent) {
      let parentComment = findComment(editedComment.parent);
      for (let i = 0; i < parentComment.children.length; i++) {
        if (parentComment.children[i]._id === editedComment._id) {
          parentComment.children[i] = editedComment;
        }
      }
    } else {
      for (let i = 0; i < comments.length; i++) {
        if (comments[i]._id === editedComment._id) {
          comments[i] = editedComment;
        }
      }
      setRerender(!rerender);
    }
  };
  const addComment = (comment) => {
    if (comment.parent) {
      const parentComment = findComment(comment.parent);
      parentComment.children = [comment, ...parentComment.children];

      setRerender(!rerender);
    } else {
      setComments([comment, ...comments]);
    }
  };
  return comments ? (
    <Stack spacing={2}>
      <CommentEditor
        addComment={addComment}
        label="What are your thoughts on this post?"
      />
      {comments.length > 0 ? (
        <Box pb={4}>
          {comments.map((comment) => (
              <Comment
                addComment={addComment}
                removeComment={removeComment}
                editComment={editComment}
                comment={comment}
                key={comment._id}
                depth={0}
              />
            )
          )}
          {loading && <Loading />}
        </Box>
      ) : (
        <Box
          display="flex"
          justifyContent="center"
          textAlign="center"
          paddingY={3}
        >
          <Box>
            <Typography variant="h5" color="text.secondary" gutterBottom>
              No comments yet...
            </Typography>
            <Typography variant="body" color="text.secondary">
              Be the first one to comment!
            </Typography>
          </Box>
        </Box>
      )}
    </Stack>
  ) : (
    <Loading label="Loading comments" />
  );
};
export default Comments;

Thanks in Advance

Pls Sir Help me to get rid of this problem

[ihtasham42]

Could you console.log your comments state and tell me what it says?

Also did you make sure to run your server because the console says you are not getting a response

[RajatShinde3]

In console it says backen
Could not fetch localhost:5000/(comment route)

[ihtasham42]

Sorry I'm not sure if I understand. Could you write console.log(comments) a line before the return statement