Previous button stays disabled, next always goes to the second page

I get this strange behavior with this is the code: I cannot click on the previous button because it stays disabled, even when going to page 2 or 3 Next always goes back to the second page Clicking on the first page doesn’t do anything (it remains to have the class “active” even when i’m on another page)

Similar behavior was found here, but not resolved: https://github.com/AdeleD/react-paginate/issues/100

        <ReactPaginate pageCount={3}
                       marginPagesDisplayed={2}
                       pageRangeDisplayed={2}

                       previousLabel={"previous"}
                       nextLabel={"next"}
                       breakLabel={<a href="">...</a>}
                       breakClassName={"break-me"}
                       disableInitialCallback={true}
                      
                       onPageChange={this.handlePageClick.bind(this)}
                       containerClassName={"pagination"}
                       subContainerClassName={"pages pagination"}
                       activeClassName={"active"} />   

[jonas-db]

This is the complete class I use. Note that it works fine by clicking on “the number 2 to go to page 2” because then the products change and works as intented. But the previous button remains disabled, and “the number 1 remains active”…

class Products extends Component
{
  state = {
    open: false,
    id : 0,
    order: "asc",
    orderBy: 'name'
  };

  componentWillMount()
  {
    this.props.all(this.props.items.meta);
  }

  handlePageClick({selected})
  {
    this.props.items.meta.skip = selected * this.props.items.meta.limit
    this.props.all(this.props.items.meta);
  }

  confirm() {
    
    console.log("removed"); //this.props.remove(this.state.id)
    this.cancel()
  } 

  cancel() {
    this.setState({ open: false, id: 0 })
  } 

  render() {
    const { data, count, meta, loading, error } = this.props.items;
    const pageCount = parseInt(count / meta.limit, 10);

    if(loading) return <Loader />
    if(error) return <Error meta={error} />

    return (
      <Layout item sm={12}>
          <Toolbar> <h2>Products</h2></Toolbar>
          <Table>
            <TableHead>
              <TableRow>
                <TableCell>Name</TableCell>
                <TableCell>Slug</TableCell>
                <TableCell>Available</TableCell>
                <TableCell>Price</TableCell>
                <TableCell>Category</TableCell>                  
                <TableCell>Actions</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {
                data.map((n) => {
                  let onEdit = () => alert("ok"); //this.props.push(`/dashboard/products/${n.objectId}/edit`)
                  let onRemove = () => this.setState({ open: true, id: n.objectId })
                  return (
                    <TableRow key={n.objectId}>
                      <TableCell>{n.name}</TableCell>
                      <TableCell>{n.slug}</TableCell>
                      <TableCell>{n.available ? 'X' : 'N'}</TableCell>
                      <TableCell>{n.price}</TableCell>
                      <TableCell>{n.category.name}</TableCell>
                      <TableCell><IconButton onTouchTap={onEdit}>edit</IconButton><IconButton onTouchTap={onRemove}>delete</IconButton></TableCell>
                    </TableRow>
                  );
                })
              }
            </TableBody>
          </Table>
          <Dialog open={this.state.open} onConfirm={this.confirm.bind(this)} onCancel={this.cancel.bind(this)} />
      <ReactPaginate pageCount={pageCount}
                     marginPagesDisplayed={2}
                     pageRangeDisplayed={2}

                     previousLabel={"previous"}
                     nextLabel={"next"}
                     breakLabel={<a href="">...</a>}
                     breakClassName={"break-me"}
                     disableInitialCallback={true}
                    
                     onPageChange={this.handlePageClick.bind(this)}
                     containerClassName={"pagination"}
                     subContainerClassName={"pages pagination"}
                     activeClassName={"active"} />            
      </Layout>  
    )
  }
}

const mapStateToProps = (state) => {
  return { 
    items: state.product.items
  };
}

const mapDispatchToProps = (dispatch) => {
  return {
    all: ProductAPI.all(dispatch),
    remove: ProductAPI.remove(dispatch),
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Products);

[jonas-db]

Ok, solved. Use forcePage