question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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"} />   

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:10 (2 by maintainers)

github_iconTop GitHub Comments

3reactions
jonas-dbcommented, Feb 25, 2017

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);
0reactions
jonas-dbcommented, Feb 26, 2017

Ok, solved. Use forcePage

Read more comments on GitHub >

github_iconTop Results From Across the Web

javascript - Button remains disabled upon pressing back
In the example, when the button is disabled and the page I'd directs to another location, firefox does keep the button disabled whereas...
Read more >
FIX: Back Button Not Working in Web Browser?
Another way to deal with the issue is to click the Back button multiple times rapidly. That helps prevent any previous redirects from...
Read more >
Frustrating Design Patterns: Disabled Buttons
Making Disabled Buttons More Inclusive #​​ Here are a couple of useful strategies that Sandrina has suggested: change the cursor on a disabled ......
Read more >
Remove "Next" button from last page of module.
My guess is that we're stuck with a "Next" on every single page, regardless of whether it is at the end of a...
Read more >
How to disable or enable buttons using Javascript and jQuery
5. Just like in javascript, if the text field is empty the button remains disabled, else it gets enabled. 6. Here the .prop ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found