Hi guys, I’m doing a blog platform app using MERN Stack.
So I have a CommentList component which contains all comments of a specific blog post. Basically it returns an unordered list <ul> with CommentItem component (which basically is a list item <li> for each of the comments. Comments are fetch from back-end.
In short, the structure is like this
<CommentList
<CommentItem />
<CommentItem />
<CommentItem />
{...}
/>
Currently, my set up is: only render the comment section after fetching all comments data. I have const [isLoading, setIsLoading] = useState(true) and I set it to false after await fetchSomeData.
So far so good, but now I want to implement a comment highlight function, that is, automatic scrolling to specific comment when clicking a context link (which simply is an <a> tag to the id of the comment). My current way of doing this is that I assign unique id to all CommentItem and I have a HashLink that leads to that id. In short, <HashLink to="/blogabc#comment-def" />
But then I realise that it never works because the comment itself takes time until it can be rendered, so basically when I click the link, it just leads me to the top of CommentList but not the to-be-rendered CommentItem
All my components are functional components, if by any chance it matters.
Do you guys have any idea on how to delay the scroll effect until the target comment renders or another way to implement that “comment highlight” function?
Please tell me if there is anything you don’t understand in my post