Challenges

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 (
        <a
            href="#"
            className="load-more"
            onClick={(e) => {
                e.preventDefault()
                setSize(size + 1)
            }}
        >
            Load more
        </a>
    )
}

(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: