Load-more pagination for the article list
React · React · advanced · greenfield
Adds client-side load-more paging to the article list: slices the visible window from the ordered prop and grows it by a page per click. The button hides itself once everything is on screen, and short final pages come through on the last click.
Requirements
- Show the first 10 articles with a 'Load more' button that reveals 10 more per click, in order, until every article is visible.
- The button must disappear once all articles are shown — including when the total isn't a multiple of 10 (the final click reveals the short remainder).
- Every article must eventually be reachable; none skipped, none duplicated.
- An empty list shows a 'No articles yet.' message and no button.
- The articles prop is already loaded and ordered; each article has a unique id.
Files touched
- src/components/ArticleList.jsx
--- src/components/ArticleList.jsx
+import React, { useState } from 'react';
+
+const PAGE_SIZE = 10;
+
+export default function ArticleList({ articles }) {
+ const [visibleCount, setVisibleCount] = useState(PAGE_SIZE);
+ const visible = articles.slice(0, visibleCount);
+ const hasMore = visibleCount < articles.length;
+
+ if (articles.length === 0) {
+ return <p className="empty">No articles yet.</p>;
+ }
+
+ return (
+ <section>
+ <ul>
+ {visible.map((article) => (
+ <li key={article.id}>{article.title}</li>
+ ))}
+ </ul>
+ {hasMore && (
+ <button type="button" onClick={() => setVisibleCount((count) => count + PAGE_SIZE)}>
+ Load more
+ </button>
+ )}
+ </section>
+ );
+}
+