Pagination generated as of 2nd <li> on created list

[coljung]

For some reason I can't yet fully understand, my pagination is loading like this:

<li><a>1</a></li>    // links to page 0 ( which doesnt exist  )
<li class="active"><a>2</a></li> //links to page 1
<li><a>3</a></li> //links to page 2
<li><a>4</a></li> //links to page 3 , also no link for page 4
<li class="next"><a>next</a></li>

Any ideas what i might be doing wrong ? My ReactPaginate component looks like this:

<ReactPaginate
                   previousLabel={"previous"}
                   nextLabel={"next"}
                   breakLabel={<a href="">...</a>}
                   breakClassName={"break-me"}
                   pageNum={this.state.pageNum}
                   marginPagesDisplayed={2}
                   pageRangeDisplayed={3}
                   clickCallback={this.handlePageClick.bind(this)}
                   containerClassName={'pagination'}
                   subContainerClassName={"pages pagination"}
                   activeClassName={'active'} />

[Rubenvdveen]

Had the same problem for some time. After some time, i just created my own pagination component.
I think the way to fix it, is to go into node modules>React Paginate, and go to PaginationBoxView.js.
This pagination component will start everything with the number 1. Altough, my own pagination would only work if i started it with the number 0. I guess that's the problem.

This might fixes it:
change this: ` page = index + 1;

    let pageView = (
      <PageView
        onClick={this.handlePageSelected.bind(null, index)}
        selected={this.state.selected === index}
        pageClassName={this.props.pageClassName}
        pageLinkClassName={this.props.pageLinkClassName}
        activeClassName={this.props.activeClassName}
        page={index + 1} />`

into this: ` page = index;

    let pageView = (
      <PageView
        onClick={this.handlePageSelected.bind(null, index)}
        selected={this.state.selected === index}
        pageClassName={this.props.pageClassName}
        pageLinkClassName={this.props.pageLinkClassName}
        activeClassName={this.props.activeClassName}
        page={index} />`

Note: I'm not sure, because i don't use this component.

[coljung]

It actually had nothing to do with my implementation.

I did some tests and found that when replicating the react-paginate demo with my data, i would have the same problem, which pointed me to an api problem instead.

So, all in all the problem was coming from somewhere else and has been fixed now.