Implementing Pagination using Offset Limit but data rendered not displayed

Question

I have tried implementing pagination in my code by following this project on CodeSandBox:

Pagination React Redux

I am now trying to take it a step further by implementing LIMIT OFFSET in my code so that only the selected number of entries are fetched and displayed instead of the entire list.

class ListTemp extends Component{
    constructor(props)
    {
        super(props);
        this.state ={
            isEdit : false,
            template_id : '',
            totalRecords: "",
            totalPages: "",
            pageLimit: "",
            currentPage: "",
            startIndex: "",
            endIndex: "",
            tempList:[]
        }
    }

    componentDidMount(){
      this.props.fetchTemps();
      this.setState({totalRecords: this.props.temp_list.length})
    }

    componentDidUpdate(){
        axios.get('/templisting',{crossDomain: true})
        .then(response => {
            if (response.status === 200 && response != null){
                if (JSON.stringify(this.props.temp_list) != JSON.stringify(response.data)){
                    this.props.fetchTemps();
                }            
            } else {
                console.log("error")
            }
        })         
    }

    onChangePage = (data) => {
        console.log("onChangePage Invoked ")
        this.setState({
            pageLimit: data.pageLimit,
            totalPages: data.totalPages,
            currentPage: data.page,
            startIndex: data.startIndex,
            endIndex: data.endIndex
        });

         axios.get('/templisting_1/'+this.state.currentPage+'/'+this.state.pageLimit,{crossDomain: true})
         .then(response => {
            if (response.status === 200 && response != null){
                console.log("Axios inside onChangePage Invoked ")
                this.setState({tempList: response.data})
            }
            console.log("pageLimit: ",this.state.pageLimit)
            console.log("currentPage: ",this.state.currentPage) 
            console.log("tempList: ",this.state.tempList)
        })
    };

    showTemp = (temp) => {
        var result = null;
        console.log(temp.length)
        if (temp.length > 0) {
            result = temp.map((temp, index) => {
                return <ListMapp key={index} temp={temp} index={index} />;
            });
        }
        return result;
    };

render(){
        var {
            totalPages,
            currentPage,
            pageLimit,
            startIndex,
            endIndex
        } = this.state;
        var rowsPerPage = [];

        rowsPerPage = this.state.tempList.slice(startIndex, endIndex + 1);

            return(
                <div className="App">
                    <h1>TEMP LIST</h1>
                    <br />
                    <br />
                    <div className="col-xs-12 box_change_pagelimit float-right">
                        Display
                        <select
                            className="form-control"
                            value={pageLimit}
                            onChange={(e) =>
                                this.setState({ pageLimit: parseInt(e.target.value) })
                            }>
                        <option value={5}>5</option>
                        <option value={10}>10</option>
                        <option value={25}>25</option>
                        <option value={50}>50</option>
                        <option value={100}>100</option>
                        <option value={this.props.temp_list.length}>All</option>
                        </select>
                        product
                    </div>
                    <br />
                    <br />
                    <br />
                    <table  className = "table table-bordered table-hover">
                    <thead>
                    <tr className = "table_style" >
                        <th className = "table_style">TempID</th>
                        <th className = "table_style">Name</th>
                        <th className = "table_style">CreatedOn</th>
                        <th className = "table_style">Action</th>
                    </tr>
                    </thead>
                    <tbody>
                    {
                        this.showTemp(rowsPerPage)
                    }
                    </tbody>
                    </table>
                    <br/>
                    <div style={{display:'inline-block'}}> 
                        <p>
                            {this.props.temp_list.length} Temp | Page {currentPage}/{totalPages}
                        </p>
                    </div> 
                    <br/>
                    <br/>
                    <div style={{display:'inline-block'}}>
                        <Pagination
                            totalRecords={this.props.temp_list.length}
                            pageLimit={pageLimit || 5}
                            initialPage={1}
                            pagesToShow={5}
                            onChangePage={this.onChangePage}
                        />
                    </div>    
                </div>
            );
        }
     }

As can be observed in onChangePage, I have passed the offset and limit values as parameters in my api call which are then passed on to the sql query which fetches the data. The data which is returned in response.data of the axios call in onChangePage is correct (I did console.log and it is the desired output) but it does not get mapped and displayed when I change the page even though it is reflected in this.state.tempList. Where am I going wrong and how can I fix this?

Answer 1

Instead of directly setting the state this.setState({tempList: response.data})

try this syntax this.setState({tempList:[...response.data]})