How to add load more pagination feature in React?

Currently our backend is sending only 2 ads on each request. Let’s add load more feature so that if there are more ads available in the database, keep returning new ads on load more button click.

// Dashboard.js

// state
const [page, setPage] = useState(1);
const [loading, setLoading] = useState(false);

// show load more button
<div className="container mt-3 mb-3">
  {ads && ads.length < total && (
    <div className="text-center mt-4 mb-4">
      <button
        disabled={loading}
        className="btn btn-warning"
        onClick={(e) => {
          e.preventDefault();
          setPage(page + 1);
        }}
      >
        {loading ? "Loading..." : `${ads?.length} / ${total} Load more`}
      </button>
    </div>
  )}
</div>

// if page state is > 1, run useEffect to fetch additional ads
  useEffect(() => {
    if (page === 1) return;

    const loadMore = async () => {
      try {
        setLoading(true);
        const { data } = await axios.get(`/user-ads/${page}`);
        setAds([...ads, ...data.ads]);
        setTotal(data.total);
        setLoading(false);
      } catch (err) {
        console.log(err);
        setLoading(false);
      }
    };
    // execute
    loadMore();
  }, [page]);

// also update fetchAds() with page param
const { data } = await axios.get(`/user-ads/${page}`);

// make sure your server route has page param
router.get("/user-ads/:page", requireSignin, ad.userAds);