CODEWITHSUNDEEP
reactjspagination
Serdar Karaca
Serdar Karaca

Reputation: 143

I could not set which elements would display on the page in which js pagination react

I tried to do Pagination but it didn't happen. I guess I couldn't figure out how many pages on json's data would appear.

Below is the link to the example I was trying to do.

Thanks to those interested.

https://codesandbox.io/embed/kategori-detay-pagination-zpzdt

 handlePageChange(pageNumber) {
    console.log(`active page is ${pageNumber}`);
    this.setState({ activePage: pageNumber });
  }

 <Pagination
          prevPageText="prev"
          nextPageText="next"
          firstPageText="first"
          lastPageText="last"
          pageRangeDisplayed={10}
          activePage={this.state.activePage}
          itemsCountPerPage={10}
          totalItemsCount={totalPosts}
          pageRangeDisplayed={10}
          onChange={this.handlePageChange}
        />

Upvotes: 0

Views: 122

Answers (1)

jimmy5312
jimmy5312

Reputation: 429

You did not bind the function handlePageChange() with proper 'this'

constructor(props) {
    super(props);
    this.state = {
      CategorySlug: "",
      CategoryBrief: [],
      Posts: []
    };

    // Need to bind the function to proper context
    this.handlePageChange = this.handlePageChange.bind(this);
}

handlePageChange(pageNumber) {
    console.log(`active page is ${pageNumber}`);

    // Without binding, 'this' refers <Pagination /> instance
    // With binding, 'this' refers to current <PageCategoryDetail /> instance
    this.setState({ activePage: pageNumber });
}

Or if you prefer, you could use at newer syntax, then you don't have to bind each function individually

handlePageChange = (pageNumber) => {
    // Your code here
}

Edit

To show the items, according to the selected page, you need to manipulate the Posts array and filter out the required items

// You only filter by the selected Category, did not handle the paging
{Posts.filter(b => b.CategoryName === CategorySlug).map(item => (
   <li key={item.PostID}>{item.Title}</li>
))}

// You need further handle the pagination
const POST_PER_PAGE = 5
const pageOffset = this.state.activePage > 0 ? this.state.activePage - 1 : 0;
const startIndex = pageOffset * POST_PER_PAGE;
const endIndex = startIndex + POST_PER_PAGE;
{Posts.filter(b => b.CategoryName === CategorySlug).slice(startIndex, endIndex).map(item => (
   <li key={item.PostID}>{item.Title}</li>
))}

https://codesandbox.io/s/kategori-detay-pagination-f72px

Upvotes: 2

Related Questions