React Hooks

Big Head
  • 👀 View the deployed code on Github.
  • Not happy with the solution? 🐞🐛 Suggest a change.
  • Grammar errors? ✏️ Edit this page.

The Http Requests and Error Boundaries

Summary: Be able to gracefully do http requests (like fetching pokemon data) for end-users and give them a good experience. Display appropriate views depending on the status of the http request and handle unexpected errors.

  • Fetch pokemons from this project!

  • Write a form where users can enter the pokemon name and your app fetches and displays that pokemon's data

  • When a request hasn't been made yet, show no pokemon yet, please submit a pokemon!

  • While fetching the pokemon data, show a loading screen

  • Display the pokemon data as soon as it arrives

  • When something goes wrong (like a network error, or a pokemon not existing in the database), the error should be displayed at the bottom of the search bar.

  • There should be a button to try again after an error. Upon clicking this, the no pokemon yet, please submit a pokemon! will be shown and the current string on the search bar would be removed.

  • After an error, the user should be able to use the search bar to search for a new pokemon without having to click the try again button.

  • This exercise is a modified version of KCD's exercise. Here's KCD's solution

My Solution

Note: This solution doesn't use a library, but in most cases that you do. Use a library like Tanner Linsley's React Query to help do this instead of implementing everything on your own from scratch.

My Top Level Component

Pokemon Info Card

My Custom Error Boundary

An example error view