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.
Build a component that displays a list of Pokemons with a "Load more" button. You can use the free Poke API 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:
To get started, you can clone this repository . It contains the scaffolding for the component and some failing unit tests:
Your job will be to implement the
pokemon-list.jsx component and get the tests to pass.
To check your work, run the tests with
npm run test and/or playing with the component by running the app with
Enjoy the challenge!
And don't hesitate to ask any questions or give feedback in the comments below.
Good luck! 🍀