如何添加antd分页组件？

Question

I want to add Antd Pagination ( documentation ) to project in "ArticlesList" component, but have no idea yet - what should I pass to pagination component to onChange = {????} Tried to make different variants, but its not work. Any help or advice how to do it?

You can see code here: codesandbox

Answer 1

You should pass your total articles length, current page and onChnage function gets two params which is page number and page size which number of articles you want to show in a page or component.

by onChange you fetch your next list.

const onChange = (page, pageSize) => {
  fetch(`yourApi/page=${page}&pageSize=${pageSize})
}

<Pagination
  total={totalArticles}
  current={currentPage}
  onChange={(page, pageSize) => onChange(page, pageSize)}
/>

mock data:

{
  articles: [],
  totalArticles: 60,
  page: 1,
  pageSize: 10, // Its up to you
}