Update Home.jsx #8
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Error Handling: We added a new state variable error using useState to handle errors that may occur during the API request for fetching questions. Inside the handleSubmit function, we wrapped the API request in a try-catch block to catch any potential errors. If an error occurs during the API request, we set the error state with an error message to inform the user. We added a conditional rendering block to display the error message in red if error is not null. Feedback for Loading: We provided feedback to the user during the loading process by using the HashLoader component from 'react-spinners' to display a loading spinner. The loading spinner is displayed in the center of the screen while questions are being fetched. The loading state is controlled by the loading state variable from the context. Improved Styling and Layout: We made minor styling improvements, such as centering text and the loading spinner on the screen. We used Chakra UI's Text component to style and display the error message in red if there is an error. User-Friendly Error Message: In the error message, we provide a user-friendly error message, such as "Failed to fetch questions. Please try again," to inform the user about the issue. These changes enhance the user experience by providing better feedback during loading and handling errors gracefully when fetching questions from the API.
✅ Deploy Preview for ask-quiz ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
@rishi457 Deployment is not working can you solve error |
imhardikdesai
requested changes
Oct 7, 2023
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Error Handling:
We added a new state variable error using useState to handle errors that may occur during the API request for fetching questions. Inside the handleSubmit function, we wrapped the API request in a try-catch block to catch any potential errors. If an error occurs during the API request, we set the error state with an error message to inform the user. We added a conditional rendering block to display the error message in red if error is not null. Feedback for Loading:
We provided feedback to the user during the loading process by using the HashLoader component from 'react-spinners' to display a loading spinner. The loading spinner is displayed in the center of the screen while questions are being fetched. The loading state is controlled by the loading state variable from the context. Improved Styling and Layout:
We made minor styling improvements, such as centering text and the loading spinner on the screen. We used Chakra UI's Text component to style and display the error message in red if there is an error. User-Friendly Error Message:
In the error message, we provide a user-friendly error message, such as "Failed to fetch questions. Please try again," to inform the user about the issue. These changes enhance the user experience by providing better feedback during loading and handling errors gracefully when fetching questions from the API.