Splice data based off page

import React,{Component}  from 'react';
import Pagination from "@material-ui/lab/Pagination";
import axios from 'axios';

class Limit extends Component {
    constructor(props) {
        super(props)
    
        this.state = {
          api: [''],
          perPage:2,
          currentPage:1,
          totalPage:0
        }
      }
    componentDidMount() {
        axios.get(`https://jsonplaceholder.typicode.com/users`)
          .then(res => {
           
            const start = this.state.currentPage* this.state.perPage - this.state.perPage;
            const end = start + this.state.perPage;
            const api = res.data.splice(start,end)
            this.setState({api});
            this.setState({totalPage:res.data.length/this.state.perPage})
          })
    }
    handleChange = (value) => {
        this.setState({currentPage: value});
        axios.get(`https://jsonplaceholder.typicode.com/users`)
        .then(res => {
         
          const start = this.state.currentPage* this.state.perPage - this.state.perPage;
          const end = start + this.state.perPage;
          const api = res.data.splice(start,end)
          this.setState({api});
        })
          
    };
    render()
    {
         return (
            <><ul>
                 {this.state.api
                     .map(person => <li key={person.id}>{person.name}</li>
                     )}
             </ul><Pagination count={this.state.totalPage} page={this.state.currentPage} onChange={this.handleChange.bind(this)} /></>
        );
    }
   
}

export default Limit

It seems to display the 2 api values I want at the start but the total pages are off which should be 5 and the handle changes doesn’t get any more data. When printing out the value in the handlechange I get object instead of the value.

>Solution :

When you use splice you are modifying the original array itself. Initially api data has 10 elements. When you performed the splice operation on api data you removed 2 elements and now the total elements in api data are 8. Then you calculated total pages on api data which is 8 / 2 = 4.

You can fix this by calculating the total pages before splicing the api data array.

componentDidMount() {
    axios.get(`https://jsonplaceholder.typicode.com/users`).then((res) => {
      const start =
        this.state.currentPage * this.state.perPage - this.state.perPage;
      const end = start + this.state.perPage;
      const totalPage = res.data.length / this.state.perPage;
      const api = res.data.splice(start, end);
      this.setState({ api, totalPage });
    });
  }
  

Also this is not a good way to implement pagination as you are fetching data for 5 pages when you need only 1 page data. You can fetch only the current page data by using query params in the api url.

For example: https://jsonplaceholder.typicode.com/users?_page=0&_limit=2

This above url will give you only the elements for current page and you will not need to do splice operation and extra work.