> ## 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 a paginated Pokemons list with a "Load more" button - starting from failing unit tests!
- URL: https://reactpractice.dev/exercise/build-a-paginated-pokemons-list-with-a-load-more-button-starting-from-failing-unit-tests/
- Published: 2023-06-23T06:33:03.000Z
- Updated: 2026-06-01T01:58:28.000Z
- Author: Corina Udrescu
- Tags: Data fetching, #corina-2, Exercises, Working with APIs, #Import 2026-06-09 12:07

It's common to see websites or applications that show lists of data with a "Load more" button.

Usually, the page initially shows just 10-15 results and if the user presses "Load more", more results are loaded and merged into the initial set.  

Some examples are the [IKEA website](https://www.ikea.com/nl/en/search/?q=office%20chairs&ref=reactpractice.dev) or the [H&M online shop](https://www2.hm.com/en%5Fus/home/shop-by-room/livingroom.html?sort=stock&image-size=small&image=stillLife&offset=0&page-size=72&ref=reactpractice.dev)!

![](https://storage.ghost.io/c/7c/fc/7cfc444f-a1c9-4dd3-a87e-8dcc2f1180be/content/images/2023/06/ikea-load-more.png)

![](https://storage.ghost.io/c/7c/fc/7cfc444f-a1c9-4dd3-a87e-8dcc2f1180be/content/images/2023/06/ikea-load-more-section.png)

![](https://storage.ghost.io/c/7c/fc/7cfc444f-a1c9-4dd3-a87e-8dcc2f1180be/content/images/2023/06/ikea-load-more-section-last-page.png)

However, their APIs are not free, so let's use the [Pokemon API](https://pokeapi.co/?ref=reactpractice.dev) instead to build something similar. Here's an example from the [Pokedex website](https://www.pokemon.com/us/pokedex?ref=reactpractice.dev) that uses the same pattern, with a "Load more" button:

![](https://storage.ghost.io/c/7c/fc/7cfc444f-a1c9-4dd3-a87e-8dcc2f1180be/content/images/2023/06/pokedex-load-more.png)

  
Build a component that displays a list of Pokemons with a "Load more" button. You can use the free [Poke API](https://pokeapi.co/?ref=reactpractice.dev) to retrieve the data.

- Initially, the component should only show the first 5 items
- Below the list, there should be a label saying how many items are being displayed from the total - e.g. "Displaying 20 of 567 results"
- Clicking "Load more" will load another 5 items into the list
- When the are no more results, the button should no longer be displayed

The styling doesn't matter for this component - just make sure to display the pokemons as `<li>` elements in a list - `<ul>` \- and show the name for each:

![](https://storage.ghost.io/c/7c/fc/7cfc444f-a1c9-4dd3-a87e-8dcc2f1180be/content/images/2023/06/pokemons-list-with-load-more-button.png)

To get started, you can clone [this repository](https://github.com/reactpractice-dev/load-more-pokemons?ref=reactpractice.dev) . It contains the scaffolding for the component and some failing unit tests:  

![](https://storage.ghost.io/c/7c/fc/7cfc444f-a1c9-4dd3-a87e-8dcc2f1180be/content/images/2023/06/pokemons-list-failing-unit-tests.png)

Your job will be to implement the [pokemon-list.jsx](https://github.com/reactpractice-dev/load-more-pokemons/blob/main/src/pokemon-list.jsx?ref=reactpractice.dev) component and get the tests to pass.

The tests are mocking the real API using [msw](https://mswjs.io/?ref=reactpractice.dev). If you want to learn more about how this works, [this is a great walkthrough](https://kentcdodds.com/blog/stop-mocking-fetch?ref=reactpractice.dev).  

![](https://storage.ghost.io/c/7c/fc/7cfc444f-a1c9-4dd3-a87e-8dcc2f1180be/content/images/2023/06/pokemons-list-sample-test.png)

To check your work, run the tests with `npm run test` and/or playing with the component by running the app with `npm start`.  
  
Enjoy the challenge!  
Good luck! 🍀