react-bootstrap pagination, how to use ?

[annieannie]

Hi,

(1) src/component/PaginationBasicFile.js has code:
the latest pagination code from https://react-bootstrap.github.io/components/pagination/  :

let active = 7;
let items = [];
for (let number = 1; number <= 10; number++) {
items.push(
<Pagination.Item active={number === active}>{number}</Pagination.Item>
);
}

const paginationBasic = (

{items}

<Pagination bsSize="medium">{items}</Pagination>
<br />

<Pagination bsSize="small">{items}</Pagination>

);

render(paginationBasic);

(2) How to use this in below case : there is an App.js file in src folder and a component folder in src:
src/App.js,
src/component/PaginationBasicFile.js

(3) can paginationBasic be exported from src/component/PaginationBasicFile.js like:
export default paginationBasic;

and imported in src/App.js like:
import paginationBasic from './components/PaginationBasicFile';
??
can paginationBasic be used in App.js like:
class App extends Component {

constructor(props) {
super(props);

this.state = {
  active: 1,
  limit: 50,
  offset: 0,
  totalPages: 0
};

this.handlePaginationSelect = this.handlePaginationSelect.bind(this);
}
handlePaginationSelect(selectedPage) {
console.log(selectedPage);
let offset = this.state.limit * selectedPage;
this.setState({
active: this.state.selectedPage
})
}
handleLimitChange (event) {
this.setState({
limit: +event.target.innerHTML || this.state.count,
activePage : 1
})
}
render() {
return (

);} } export default App;

(4) what is the correct method to use latest pagination?

Thank You.

[jquense]

The pagination components are "presentational" meaning they only wrap DOM nodes and add some styles, it's up to you in your app to add pagination logic to them. It also sounds like you may be struggling to get a react app setup out of different files. I'd suggest checking out a support avenue like our Discord server for more help there!

[annieannie]

Hi,

Even if the pagination components are "presentational", it is not clear how to use the the latest pagination code from https://react-bootstrap.github.io/components/pagination/
.
What i am looking for is just how to use pagination in real case and the question is not answered.
The react app setup is clear and its simple created with create-react-app, and the only struggle is to use pagination. The other react-bootstrap components like Buttons, Col.. are working fine in this project.
The file setup given in my question was just to ask if the pagination is applied correctly there or there is some mistake Ignore the file setup i mentioned, just let me know how to use the pagination exactly, even if it is presentational.
I would appreciate if you can share the link for -"a support avenue like our Discord server for more help there!" -you mentioned for support.

Thank You.

[gauravrakheja]

you need to add the onClick prop to the Pagination Component. Something like

   constructor(props){
      super(props)
      this.pageChanged = this.pageChanged.bind(this);
   }

   pageChanged(e){
        console.log(e.target.text)
   }

    <Pagination onClick={this.pageChanged}>
              {this.paginationOptions()}
    </Pagination>

which should give you the whole tag rendered by the pagination, You can pass the the e.target.text to your api to handle the pagination logic

[timwsuqld]

@jquense I think the documentation is lacking, if there are so many people who have to find this ticket to work it out. The docs don't mention that the onClick should be on the Pagination Component, instead of the Pagination.Item. Infact, the docs fail to mention that onClick is needed at all. We have href on the Pagination.Item which is actually not helpful.