title: how to react-js-pagination implement with react hook data table
body: <p>How to integrate pagination code with hooks method data table with. im using react-js-pagination nmp package but there is no one explanation for implement with hook method program.</p>
  <p>This my data table code:</p>
  <pre><code>    import React, { useEffect, useState } from 'react';
      import axios from 'axios'
      import 'bootstrap/dist/css/bootstrap.min.css';
      import {Link} from 'react-router-dom';
      const ProTable = () =&gt; {
        const [data, setData] = useState([]); 
        useEffect(() =&gt; {
          loadData();
        }, []);
        const loadData = async() =&gt; {
          axios.get('http://localhost:5000/api/clientgetdata')
            .then(response =&gt; {
              setData(response.data.map);
        }   
        const delPro = (item,e) =&gt; {
      
          var option = window.confirm(`Are you sure to delete ${e.clientName} OF ${item.projectName}`)
          if(option){
            const check = axios.delete(`http://localhost:5000/api/clientdelpro/${e.clientName}/${item.projectName}`).then(res =&gt; {
            //console.log(clientname) 
            window.location.reload(false)
            })
         }
        }
          
        return (
          &lt;&gt;
            &lt;div className=&quot;row addButton&quot;&gt;
                  &lt;div className=&quot;col-lg-1&quot;&gt;
                  &lt;Link
                      className=&quot;btn btn-outline-primary mr-2&quot;
                      to={'/client/addpro'}
                    &gt;New&lt;/Link&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;col-lg-1&quot;&gt;
                  {/* &lt;button variant=&quot;primary&quot; &gt;Delete&lt;/button&gt; */}
                  &lt;/div&gt;
              &lt;/div&gt;
            &lt;div className=&quot;row hrtable&quot;&gt;
              &lt;div className=&quot;col-lg-10 col-sm-6 col-md-6&quot;&gt;
                &lt;div className=&quot;table-responsive tcenter&quot; &gt;
                  &lt;table className=&quot;table table-bordered table-hover table-sm&quot;&gt;
                    &lt;thead className=&quot;thead-dark&quot;&gt;
                      &lt;tr&gt;                 
                        &lt;th scope=&quot;col&quot;&gt;&lt;input type=&quot;checkbox&quot; /&gt;&lt;/th&gt;
                        &lt;th scope=&quot;col&quot;&gt;Client Name&lt;/th&gt;
                        &lt;th scope=&quot;col&quot;&gt;Project Name&lt;/th&gt;
                        &lt;th scope=&quot;col&quot;&gt;Status&lt;/th&gt;  
                        &lt;th&gt;Action&lt;/th&gt;        
                      &lt;/tr&gt;
                    &lt;/thead&gt;
                      { (data.length &gt; 0) ? data.map( e =&gt; {
                        return (
                          &lt;&gt;
                            {e.project.map(item=&gt; {
                            return (
                              &lt;tbody&gt;
                                &lt;tr&gt;
                                &lt;th scope=&quot;row&quot;&gt;
                                  &lt;input type=&quot;checkbox&quot;/&gt;
                                &lt;/th&gt;
                                &lt;td&gt;&lt;ul&gt;{e.clientName}&lt;/ul&gt;&lt;/td&gt;
                                &lt;td&gt;&lt;ul&gt;{item.projectName}&lt;/ul&gt;&lt;/td&gt;
                                &lt;td&gt;&lt;ul&gt;{item.proStatus}&lt;/ul&gt;&lt;/td&gt;
                                &lt;td&gt;
                                &lt;Link
                                    className=&quot;btn btn-outline-primary mr-2&quot;
                                    to={`/project/edit/${e.clientName}/${item.projectName}`} &gt;
                                    Edit
                                &lt;/Link&gt;
                                &lt;button
                                  className=&quot;btn btn-danger&quot;
                                  onClick={() =&gt; delPro(item,e)}&gt;
                                  Delete
                               &lt;/button&gt;
                               
                              &lt;/td&gt;   
                              &lt;/tr&gt;
                              &lt;/tbody&gt;
                              );
                          })}
                        &lt;/&gt;
                        );
                      }) : &lt;tr&gt;&lt;td colSpan=&quot;5&quot;&gt;No Records Found&lt;/td&gt;&lt;/tr&gt; } 
                  &lt;/table&gt;
                  &lt;/div&gt; 
                &lt;/div&gt;
                &lt;/div&gt;
           &lt;/&gt;
        );
      }
      
      export default ProTable;
  </code></pre>
  <p>This is Reaci-js-pagination code.
  I am trying to follow this tutorial to create a pagination in my application <a href="https://www.npmjs.com/package/react-js-pagination#usage" rel="nofollow noreferrer">https://www.npmjs.com/package/react-js-pagination#usage</a></p>
  <pre><code>    import React, { Component } from &quot;react&quot;;
      import ReactDOM from &quot;react-dom&quot;;
      import Pagination from &quot;react-js-pagination&quot;;
      require(&quot;bootstrap/less/bootstrap.less&quot;);
       
      class App extends Component {
        constructor(props) {
          super(props);
          this.state = {
            activePage: 15
          };
        }
       
        handlePageChange(pageNumber) {
          console.log(`active page is ${pageNumber}`);
          this.setState({activePage: pageNumber});
        }
       
        render() {
          return (
            &lt;div&gt;
              &lt;Pagination
                activePage={this.state.activePage}
                itemsCountPerPage={10}
                totalItemsCount={450}
                pageRangeDisplayed={5}
                onChange={this.handlePageChange.bind(this)}
              /&gt;
            &lt;/div&gt;
          );
        }
      }
       
  
  plz help me how integrate both code
   
  </code></pre>