> ## Content Index
> Fetch the complete content index at: https://reactpractice.dev/llms.txt
> Use this file to discover other available public pages before exploring further.

# Build an infinite scrolling list of Pokémon
- URL: https://reactpractice.dev/exercise/build-an-infinite-scrolling-list-of-pokemons/
- Published: 2024-07-01T08:18:19.000Z
- Updated: 2026-06-01T01:58:17.000Z
- Author: Corina Udrescu
- Tags: Essential, #corina-2, Exercises, Beginner, #Import 2026-06-09 12:07

Start by displaying a list of 12 Pokémon.   
For each Pokémon, show its name and photo.   
As the user scrolls, when he reaches the end of the currently visible items, show a "Loading..." text message and start loading the next page.

You can use the official Poke API to fetch the Pokémon: [https://pokeapi.co/](https://pokeapi.co/?ref=reactpractice.dev)  
For the images, I suggest using pokemondb, as I found the sprites provided by the official API to be of too low resolution.

```javascript
const name = 'bulbasaur'; 
`https://img.pokemondb.net/artwork/${name}.jpg`;

```

(thanks to [this Stack Overflow answer](https://stackoverflow.com/a/77859061?ref=reactpractice.dev) for the tip!)

For detecting when the user reached the end of the page, I suggest using the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection%5FObserver%5FAPI?ref=reactpractice.dev).

💡

Ready to check your work?  
[Become a member](https://reactpractice.dev/become-a-member/) and get access to the [official solution](https://reactpractice.dev/solution/tutorial-build-an-infinite-scrolling-list-of-pokemons/) and the comments section for feedback and discussion.