disabling button on specific condition on r

Issue

I am using below code for pagination.

  <ul className="pagination">
          <li className="page-item">
            <button  className="page-link btn btn-success btn-block"  onClick={prev} >Previous</button>
          </li>
          <li className="page-item">
            <button className="page-link btn btn-success btn-block " onClick={next}>Next</button>
          </li>
        </ul>


 const next = () => {
    if (page <= lastPage) {
      setPage(page + 1);
    }
  }
  const prev = () => {
    if (page > 1) {
      setPage(page - 1);
    }
  }

my requirement is when data of first page is getting displayed then prev button should be disabled. when data of lastpage is getting displayed then nextbutton should be disabled.

I mean if(page==1) disableprev and if(page==lastPage)disable next .how can I do it?

Solution

You can conditionally disable a button using an expression on the disabled property of the button. For example, for the Previous Button, you can do this,

<button disabled={page == 1} className="page-link btn btn-success btn-block"  onClick={prev} >Previous</button>

You can follow the same thing for the Next button too. Just change the expression to page == lastPage

But make sure that the page property is a state of the component so that React automatically refreshes the component when it changes. Regarding your use of setPage I suppose it's already the case

Answered By - Jahir