0

could someone lend me a hand at this?

I have a code that is working fine, it shows a list of all fire type Pokemon, the names and the images. It is showing all fire pokemon (100 pokemon more or less), but i want to request ONLY the first 10, the is a way to do this? (i have tried to put "params: _limit:10" at the axios.get function but didnt work.

export default class PokemonList extends Component {
state= {
    url: 'https://pokeapi.co/api/v2/type/fire',
    pokedata: null
};
async componentDidMount() {
    const res = await axios.get(this.state.url);
    this.setState({ pokedata: res.data['pokemon'] })

}
render() {
    return (
        <PanelArea>
            {this.state.pokedata ? (
        <div className='row'>
            {this.state.pokedata.map(pokedata => 
                <PokemonCard
                    key={pokedata.pokemon.name}
                    name={pokedata.pokemon.name}
                    url={pokedata.pokemon.url}
                />
                )}
        </div>
    ) : (
        <h1> Carregando Pokemon </h1>
    )}
    </PanelArea>
)};

}

darthrevan93
  • 23
  • 3
  • 2
    You API at backend should support pagination (i.e. page size or data size / limit). – Ajeet Shah May 17 '20 at 00:16
  • The pokeapi docs says: use this - `https://pokeapi.co/api/v2/evolution-chain/?limit=20&offset=20` for pagination. – Ajeet Shah May 17 '20 at 00:20
  • i tried " url: 'https://pokeapi.co/api/v2/type/fire?limit=10&offset=10' " but still showing all the fire pokemons at the page, when i put the pokemon.data inside the "res" it receives all the data, not the first 10 – darthrevan93 May 17 '20 at 00:28
  • A similar [answer](https://stackoverflow.com/a/40234427/2873538) to do pagination at frontend. – Ajeet Shah May 17 '20 at 00:36

2 Answers2

0

What you are trying to achieve is strictly an API level change.

Also pokemon API has a limit param that could be used to set the limit of items requested. I might suggest try to use that.

If for some reason that isn't working, you can have a workaround in your client-side code where you fetch the pokemon data.

Let's say that you are getting 100 items returned in an array. Before setting local state with this value, you could filter over the incoming results and make sure that you are just accepting the first 10 or last 10 or whatever your implementation maybe.

Update with further details:

The response which comes in, is an object, which has a key named, pokemon, this is an array. All you need to do is before setting the local state with pokemon data, have a wrapper function do certain manipulations.

function mapPokemonData = (data) => {
  // let's assume you always need only ten items and that the API is 
  // always going to return you data more than 10
  let updatedData = [];
  if(data.length >= 10) {
    updatedData = [...data].splice(0, 10)
  } else {
    updatedData = [...data]
  }
  return updatedData
}

Now you can take the returned value from this function and then set the local state value.

Ashish Singh
  • 744
  • 6
  • 15
0

I have discovered a way that worked for me, i just added .slice(0,10) after the res.data request and worked out fine!

 async componentDidMount() {
    const res = await axios.get(this.state.url);
    this.setState({ pokedata: res.data['pokemon'].slice(1,10) })


}
darthrevan93
  • 23
  • 3