Add Pagination Support

Hide the Load More Link

Let's hide the "Load More" link when we reached the end. To do that, introduce the following function inside the React component:

const renderLoadMore = () => {
    if (!comments) {
        return null

    // We asked for a page, but we haven't seen that yet.
    if (size > data.length) {
        return (
            <span className="load-more">loading...</span>

    // Detecting the end of the list
    if (pageLimit * size > comments.length) {
        return null

    return (
            onClick={(e) => {
                setSize(size + 1)
            Load more

(Here's the final version of the file after all these changes.)

It will return null if we reach the end of the list. Have a look at how we detect the end of the list.

Then replace the existing "Load More" link with this:

{ renderLoadMore() }

Now it will hide the "Load More" link if you reach to the end. Give it a try.

šŸ’” If we need to render React elements selectively & the logic is complex, it's good to extract it into a function like this. That will make the code easy to follow.

šŸ™ We need your help

We need your help to keep maintain & add new content to this course. Here's how you can support us: