title: return to current page in pagination using react
body: <p>index.js</p>
  <pre><code>const Users = () =&gt; {
   const [valid] = useState([]);
   const [users, setUsers] = useState([]);
  
  const TestSync = async () =&gt; {
   const res = await axios.get(`https://rekko.dev.devserver.in/dashboard-users`, {})
   setUsers(res.data.response.userRecords || [])
  }
   useEffect(() =&gt; {
    TestSync()
   }, [])
  
   // Data to be rendered using pagination.
   const todos = users;
   const todosPerPage = 10;
   const [activePage, setCurrentPage] = useState(1);  =====&gt;&gt;&gt; if here page number is set dyanimically to current page will solve problem
  
  // Logic for displaying current todos
  const indexOfLastTodo = activePage * todosPerPage;
  const indexOfFirstTodo = indexOfLastTodo - todosPerPage;
  const currentTodos = todos.slice(indexOfFirstTodo, indexOfLastTodo);
  
  const handlePageChange = (pageNumber) =&gt; {
   setCurrentPage(pageNumber)
  };
  
  return (
        &lt;&gt;
          &lt;CRow&gt;
            &lt;CCol xl={12}&gt;
              &lt;CCard&gt;
                &lt;CCardHeader&gt;
                  &lt;strong&gt; &lt;span className='dashHead'&gt; Users &lt;/span&gt; &lt;/strong&gt;
                &lt;/CCardHeader&gt;
                &lt;CCardBody&gt;
                  &lt;CDataTable
                    items={currentTodos}
                    fields={[
                      {
                        key: 'name', _classes: 'font-weight-bold'
                      }, 'Joining Date', 'Registration Type', 'actions'
                    ]}
                    hover
                    striped
                    scopedSlots={{
                      'name':
                        (item) =&gt; (
                          &lt;td className='width'&gt;
                            {item.name}
                          &lt;/td&gt;
                        ),
                      'Joining Date':
                        (item) =&gt; (
                          &lt;td&gt;
                            {item.createdAt}
                          &lt;/td&gt;
                        ),
                      'actions':
                        (item) =&gt; (
                          &lt;td&gt;
                            &lt;Link to={(`/user/${item.id}`)} &gt;
                              &lt;CIcon className=&quot;text-success&quot; name=&quot;cil-people&quot; /&gt;
                            &lt;/Link&gt;
                          &lt;/td&gt;
                        )
                    }}
                  /&gt;
                  &lt;div className=&quot;pagination&quot;&gt;
                    &lt;Pagination
                      activePage={activePage}
                      itemsCountPerPage={10}
                      totalItemsCount={todos.length}
                      pageRangeDisplayed={2}
                      onChange={handlePageChange}
                    /&gt;
                  &lt;/div&gt;
                &lt;/CCardBody&gt;
              &lt;/CCard&gt;
            &lt;/CCol&gt;
          &lt;/CRow&gt;
        &lt;/&gt;
      )
    }
  }
  
  export default Users
  </code></pre>
  <p>Everything is working fine but what I want that if I go into detail of any user after that it returns to the first page as by default active page is set to 1. What I want is it shows 10 records on one page and if I am on the second page and I open detail of any user and return back it goes back to 1 page basically the solution can be if the active page set to 2 if I am on the second page and 3 if I am on the third page then it will solve the problem but don't know-how. I am stuck on this for the last 2 days any help will be appreciated</p>