Mandatory Exercises

Mandatory Assignment 2

1
2
3
4
5

Part two

Step 1: Table component

Create a table component in the Table.js file that displays the data from the API. Only display the Country, Continent, Population and Population Growth values. Use HTML tables to implement the table.


Hint
  • Use .map() to create table rows for each of the country elements in apiResponse.

Step 2: Search component

Create a search bar component consisting of a text field and a button and add it to application. When the user clicks the button the table should only display countries that contain the search term. Make sure that the input field is a controlled component.


Hint
  • Create a function in the App component that changes the searchQuery state and pass that function to the search component as a prop. When the search button is clicked the content of the text field should be sent to this function. This is known as a callback function

Step 3: Page size component

Create a component that lets the user choose how many results should be displayed per page in the table. For example 10, 20 or 50 results per page.


Hint
  • For this task you need to create a new state variable and modify the useEffect function to add pageSize to the API query.

Step 4: Pagination component

Create a pagination component that lets you to go to the next page or the previous page of the data. Make sure that it the back button doesn't show on the first page, and the next button doesn't show on the last page by using conditional formatting.


Hint
  • The `apiResponse` state contains relevant data like current page and total pages.
  • This task can be solved without creating more state.

Step 5: Sorting support (optional)

Modify the table so that when one of the headers are pressed the table is sorted by the selected column. If you click on for example Country once it is sorted alphabetically from smallest to largest. If you click on it again it is sorted from largest to smallest.

Step 6: Continent Selector (optional)

Create check boxes for each of the continents that automatically modify your API requests so that the table only shows the countries for the selected continents.

PrevNext Lesson