-2
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.
You should bring 10 out of 10 of the API it gives you this opportunity. And then page like this. The API already does this
– novic
Virgilio thanks for answering. But, please can show me how. I am apprentice and do not know how to do it yet. I would be very grateful.
– Luizcow