Load More with paginated api

Solution 1:

The idea is pretty simple. Just concatenate arrays using the Spread syntax as follows.

var first =[1, 2, 3];
var second = [2, 3, 4, 5];
var third = [...first, ...second];

So, do this thing when you're clicking the load more button.

Here I've come up with handling the whole thing:

Firstly, I will call a function inside the useEffect hook to load some blog posts initially. Secondly I've declared an extra state to show Loading and Load More text on the button.

Here is the full code snippet:

import React, { useState, useEffect } from "react";

const MainPage = () => {
  const [loading, setLoading] = useState(false);
  const [blogs, setBlogs] = useState([]);
  const [count, setCount] = useState(1);

  useEffect(() => {
    const getBlogList = () => {
      setLoading(true);
      fetch(
        "https://blog.apiki.com/wp-json/wp/v2/posts?_embed&categories=518&page=" +
          count
      )
        .then((response) => response.json())
        .then((json) => {
          setBlogs([...blogs, ...json]);
          setLoading(false);
        });
    };

    getBlogList();
  }, [count]);

  return (
    <div>
      <p>All the recent posts</p>
      {blogs &&
        blogs.map((blog) => {
          return (
            <div key={blog.id}>
              <img
                width="100px"
                src={blog._embedded["wp:featuredmedia"][0].source_url}
              />
              <p>{blog.title["rendered"]}</p>
            </div>
          );
        })}
      {
        <button onClick={() => setCount(count + 1)}>
          {loading ? "Loading..." : "Load More"}
        </button>
      }
    </div>
  );
};

export default MainPage;

Solution 2:

According to React documentation:

If the new state is computed using the previous state, you can pass a function to setState.

So you could append newly loaded blog posts to the existing ones in useEffect like this:

setBlogs((prevBlogs) => [...prevBlogs, ...json])

I would also set the initial state to an empty array rather than an empty string for consistency:

const [blogs, setBlogs] = useState([]);