REACT ERROR == EXTERNAL API PAGINATION

Question

Please I need help to make a pagination of the information results in an external API (pokeapi.co) I can find all the items, I limited the responses in a hundred units and now I want to page ten by ten per page, but it shows the following error, when I click on the page links to change pages and the items still do not appear as paginated. Error below:

this.setState is not a Function on line 21 of the code I list below:

    import React, { Component } from 'react';
    import axios from 'axios';
    import Pagination from 'react-js-pagination';
    import PokemonCard from './PokemonCard';

    require ('bootstrap-less/bootstrap/bootstrap.less');

    export default class PolemonList extends Component {
     constructor(props) {
     super(props);
     this.state = {
      activePage: 1,
      pageNumber: 10
    };
   }

    handlePageChange(pageNumber) {
    console.log(`active page is ${pageNumber}`);
    this.setState({activePage: pageNumber});
  }

  state = {
    url: 'https://pokeapi.co/api/v2/pokemon/?offset=0&limit=100',
    pokemon: null
  };

  async componentDidMount() {
    const res = await axios.get('https://pokeapi.co/api/v2/pokemon/?offset=0&limit=100');
    this.setState({ pokemon: res.data['results'] })
  }

  render() {
    return(
      <React.Fragment>
        {this.state.pokemon ? (
          <div className="row">
            {this.state.pokemon.map(pokemon => (
              <PokemonCard
                key={pokemon.name}
                name={pokemon.name}
                url={pokemon.url}
              />
              ))}
          </div>
        ) : (
              <h2>Loading Pokemon</h2>
        )}
        <hr></hr>
        <div className="row">
          <div className="col-12 text-center">
            <Pagination
              activePage={this.state.activePage}
              itemsCountPerPage={8}
              totalItemsCount={100}
              pageRangeDisplayed={10}
              onChange={this.handlePageChange}
            />
          </div>
        </div>
      </React.Fragment>
    );
  }
}

Please can anyone help me? Thank you in advance.

Answer 1

I will suggest a minimum example so that you can adapt to your code in a very simple and objective way, which only brings the pagination data when requested.

const PokemonCard = (props) => {
  return (    
      <div className="col-sm-3 col-md-4">
        <div className="thumbnail">          
          <div className="caption">
            <h3>{props.name}</h3>            
          </div>
        </div>
      </div>    
  );
};

class App extends React.Component {
  constructor(){
    super();
    this.state = {
      activePage: 1,      
      data: {
        count: 0,
        next: '',
        previous: '',
        results:[]
      }
    };
    this.handlePageChange = this.handlePageChange.bind(this);
  }
  handlePageChange(pageNumber) {    
    this.setState({activePage: pageNumber}, () => {
      this.loadItems(pageNumber);
    });
    return true;
  }
  loadItems(page) {
    const url = 'https://pokeapi.co/api/v2/pokemon/?offset=' + page + '&limit=10';
    axios.get(url)
      .then(response => {        
        this.setState({data: response.data});
        console.log(this.state.data);
      })
  }
  async componentDidMount(){
    this.loadItems(this.state.activePage);
  }
  render() {
    return (
      <div className="container">
        <div className="row">
          {this.state.data.results.map((result,index) => (
            <PokemonCard key={index} name={result.name}></PokemonCard>
          ))}          
        </div>
        <div>
          <Pagination
            activePage={this.state.activePage}
            itemsCountPerPage={10}
            totalItemsCount={this.state.data.count}
            pageRangeDisplayed={5}
            onChange={this.handlePageChange}
          />
        </div>
      </div>
    );
  }  
}
ReactDOM.render(<App/>,document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>