Math magicians: fetch data from API #4
Conversation
There was a problem hiding this comment.
HI @HossainAraf,
Good job so far! There are some issues that you still need to work on to go to the next project but you are almost there!
Highlights
- The
useEffecthook has been used correctly - There is a
loadingstate - There is an
errorstate
Required Changes ♻️
Check the comments under the review.
Cheers, and Happy coding!👏👏👏
Feel free to leave any questions or comments in the PR thread if something is not 100% clear.
Please, remember to tag me in your question so I can receive the notification.
Please, do not open a new Pull Request for re-reviews. You should use the same Pull Request submitted for the first review, either valid or invalid unless it is requested otherwise.
As described in the Code reviews limits policy you have a limited number of reviews per project (check the exact number in your Dashboard). If you think that the code review was not fair, you can request a second opinion using this form.
src/components/DisplayQuote.js
Outdated
| const JokeComponent = () => { | ||
| const [joke, setJoke] = useState(null); | ||
| const [loading, setLoading] = useState(true); | ||
| const [error, setError] = useState(false); | ||
|
|
||
| useEffect(() => { | ||
| const myAPIKey = 'Ixgm2cYnlo7wGSvmiMQCVvfUJ6kVeTvgNZShaXEC'; | ||
| const apiURL = 'https://api.api-ninjas.com/v1/dadjokes?limit=1'; | ||
|
|
||
| const options = { | ||
| method: 'GET', | ||
| headers: { 'X-Api-Key': myAPIKey }, | ||
| }; | ||
|
|
||
| const fetchData = async () => { | ||
| try { | ||
| const response = await fetch(apiURL, options); | ||
| const data = await response.json(); | ||
| setJoke(data[0].joke); | ||
| } catch (error) { | ||
| setError(true); | ||
| } | ||
| setLoading(false); | ||
| }; | ||
|
|
||
| fetchData(); // Call the function to fetch data when the component mounts |
There was a problem hiding this comment.
- I suggest that you change a function to
QuotenotJokeas the requirement says - Please change the API from
JoketoQuoteyou can refer to this link
There was a problem hiding this comment.
Hi @HossainAraf,
Your project is complete! There is nothing else to say other than... it's time to merge it 
Congratulations! 🎉
Highlights
- The useEffect hook has been used correctly 👏
- There is a loading state 👏
- There is an error state 👏
Optional suggestions
Every comment with the [OPTIONAL] prefix won't stop the approval of this PR. However, I strongly recommend you to take them into account as they can make your code better. Some of them were simply missed by the previous reviewer and addressing them will really improve your application.
Cheers and Happy coding!👏👏👏
Feel free to leave any questions or comments in the PR thread if something is not 100% clear.
Please, remember to tag me @Alusp in your question so I can receive the notification.
As described in the Code reviews limits policy you have a limited number of reviews per project (check the exact number in your Dashboard). If you think that the code review was not fair, you can request a second opinion using this form.
There was a problem hiding this comment.
- [Optional] When I refresh the browser two quotes display one after the other, it is supposed to be one quote per refresh. Please resolve that.
Method Implemented: