Hello! I'm practising building comments app, where user can leave comment and reply to others' comments! When the user clicks on reply
there's an event that binds each time it is clicked and should store the currently clicked comment's id in a useState variable prev for later sending to server. That current's id value is not undefined, it's a string, but when I set it like setPrev(curr._id), the useEffect that is responsible for listening to changes made to that prev variable shows me (when I call alert(prev)) that it has its initial value - null. And when sending on server it's null too. But ! When console.log'ging that prev value, it returns me the epected value for the prev (some id like: 85654646054hre, for instance). Here's the code for that CommentsExpandedArticle component:
export default function SpecificPostCommentsExtended({ article }) {
const [prev, setPrev] = useState("");
const [loaded, setLoaded] = useState(false);
const [comments, setComments] = useState([]);
const ifNoCom = async () => {
setLoaded(true);
setTimeout(function () {
document.querySelector("#confirm").addEventListener("click", async () => {
const data = await axios({
url: vars.BACKENDURL + "/comment",
withCredentials: true,
method: "POST",
data: {
article: article,
comment: {
content: document.querySelector("#commentcontent").value,
prevId: prev === "" ? null : prev,
},
},
});
setLoaded(true);
});
}, 30);
return;
};
const ifCom = async () => {
let i = 0;
await article.commentsArr.forEach(async (c) => {
const { data } = await axios({
url: vars.BACKENDURL + "/getcomment",
withCredentials: true,
method: "POST",
data: { comment: { _id: c } },
});
if (!comments.includes({ ...data })) {
setComments((current) => [...current, { ...data }]);
}
i++;
if (i === article.commentsArr.length - 1) {
setLoaded(true);
document
.querySelector("#confirm")
.addEventListener("click", async () => {
console.log("It's prev - ", prev, "!lalalal");
const data = await axios({
url: vars.BACKENDURL + "/comment",
withCredentials: true,
method: "POST",
data: {
article: article,
comment: {
content: document.querySelector("#commentcontent").value,
prevId: prev === "" ? null : prev,
},
},
});
});
}
});
};
const getComments = async () => {
setComments([]);
setLoaded(false);
if (article.commentsArr.length === 0) {
ifNoCom();
} else {
ifCom();
}
};
useEffect(() => {
getComments();
}, []);
return (
<>
<Header>
<HeaderImg src="../../assets/headerpic.png" />
<Navbar>
<span>mypage</span>| <span>log out</span>
</Navbar>
</Header>
<Content>
<SideBar />
<RightFrame>
{loaded === false ? (
<CircularProgress />
) : (
<>
<UpperBlock>
<Title>
{article.group.toLowerCase()}
<Subtitle>
<span>previous</span>
<span>next</span>
<span>list</span>
</Subtitle>
</Title>
<PostContainer>
<PostDecription>
<div className="left">
<h2>{article.title}</h2>
<span>{article.writer}</span>
<span>{article.date}</span>
</div>
<div className="right">
<span
onClick={async () => {
window.location = `/${article._id}/edit`;
}}
>
edit
</span>
<span>|</span>
<span
onClick={async () => {
if (
!window.confirm(
"Are you sure you want to delete this post?"
)
) {
return;
}
const { data } = await axios({
url: vars.BACKENDURL + `/deletepost`,
withCredentials: true,
method: "DELETE",
data: {
post: {
id: article._id,
},
},
});
alert(data);
}}
>
delete
</span>
</div>
</PostDecription>
<PostContents>
<h3>Contents</h3>
<p>{article.content}</p>
</PostContents>
</PostContainer>
</UpperBlock>
<LowerBlock>
<ReportBtns>
<ReportBtnMock>inappropriate language</ReportBtnMock>
<ReportBtnMock>misinformation</ReportBtnMock>
</ReportBtns>
<LowerRightFrame>
<div>
<span
onClick={() => {
window.location = "/specificpost/" + article._id;
}}
>
<img src="../../assets/comments.png" /> Comments{" "}
{article.comments}
</span>
<span
onClick={async () => {
const { data } = await axios({
url: vars.BACKENDURL + "/like",
method: "POST",
withCredentials: true,
data: {
post: article,
},
});
alert(data);
}}
>
<img src="../../assets/likes.png" /> Likes {article.likes}
</span>
</div>
<div>
<span>Like</span>
<span>|</span>
<span>Report</span>
</div>
</LowerRightFrame>
<CommentsBlock>
{comments.map((c, i) => {
console.log("C comment id", c.comment._id);
const _id = c.comment._id;
return (
<>
<Comment key={i}>
<Nickname>{c.comment.author}</Nickname>
<Contents>{c.comment.content}</Contents>
<LowerCommentContainer>
<span>{c.comment.date}</span>
<span
onClick={(e) => {
setPrev(_id);
console.log(_id, "-is id");
console.log(prev, "- prev");
}}
>
reply
</span>
</LowerCommentContainer>
</Comment>
{c.subcomments.map((sc, j) => {
return (
<SubComment key={j}>
<Nickname>{sc.author}</Nickname>
<Contents>
@{sc.author}, <br /> {sc.content}
</Contents>
<LowerCommentContainer>
<span>{sc.date}</span>
</LowerCommentContainer>
</SubComment>
);
})}
</>
);
})}
<ContentsInput id="commentcontent" />
<Confirm id="confirm">Post</Confirm>
</CommentsBlock>
</LowerBlock>
</>
)}
</RightFrame>
</Content>
</>
);
}
What I have tried:
Onclick Event attached to span with label "reply" tells me
60c6f3a623961520f85c23f7 -is id
60c6f3a623961520f85c23f7 - prev
Yet the useEffect responsible for sending data to Db tells me:
It's prev - !lalalal
Can you please help me make out how to set the value to that useState hook, what am I doing wrong? Maybe useState variable is overwritten somewhere else and I juts don;t know about it?
Submit an article or tip