Reactで「さらに表示」ボタンを実装する方法について

今回はreact+TypeScriptで「さらに表示」ボタンを実装する方法について解説します。
ただし、ボタンを押すたびにdbとやり取りするものではなく、予め全部のデータを取得しておいて、隠れているものをさらに表示ボタンを押すことで表示するというものになります。

完成形のコード

まずは完成形のコードをお見せします。
ボタンに関わる部分だけ記載します。
※全体のコードはこちら

Home.jsx

const Home = () => {
  const [loadIndex, setLoadIndex] = useState(4);
  const [isEmpty, setIsEmpty] = useState(false);
  const [currentPost, setCurrentPost] = useState([]);

  const displayMore = () => {
    if (loadIndex > currentPost.length) {
      setIsEmpty(true);
    } else {
      setLoadIndex(loadIndex + 4);
    }
  };

  return (
    <>
          {currentPost.slice(0, loadIndex).map((post: any) => (
            {/* Postは投稿一つ一つを表示するためのコンポーネントです。 */}
            <Post
              key={post.id}
              authorName={post.authorName}
              content={post.content}
              createdAt={post.createdAt}
              title={post.title}
              id={post.id}
              uid={post.uid}
              category={post.category}
            />
          ))}
            <Button
              disabled={isEmpty ? true : false}
              onClick={displayMore}
              variant="contained"
            >
              さらに表示
            </Button>
    </>
  );
};

解説

さらに表示ボタンを押すとdisplayMoreという関数が動くようになっています。displayMoreでは、現在表示されている投稿の数によってこれ以上表示する投稿があるのかどうかを判断しています。

表示する投稿数の制御は、currentPost.slice(0, loadIndex).map((post: any)で行っています。
currentPostは全部の投稿が入っている配列で、その中身をを0番目からloadIndexの数だけ取り出してmapでイテレートしています。
loadIndexはhooksで、初期値は4としています。つまり初期表示時は投稿が4件表示されます。そこでさらに表示ボタンを押すことで、displayMoreが動き、loadIndexとcurrentPostのlengthを比較してloadIndexの方が大きい場合はsetLoadIndex(loadIndex + 4)とすることで、sliceする投稿の数を4つ増やす(つまり+4件投稿を表示する)ということになります。
これを繰り返す(さらに表示ボタンを何回も押す)ことでいつかloadIndex > currentPost.lengthとなる時が来ます。
その時にsetIsEmpty(true)とすることで、これ以上表示する投稿があるかどうか判定する関数isEmptyがtrueとなり、Buttonのdisabledがtrueとなるため、ボタンが押せなくなります。