React Advice Generator

Community feedback

• 

  PatrickLee22•170

  @PatrickLee22Posted over 1 year ago

  Hello there 👋. Congrats on completing the challenge!

  To resolve the caching issue, you can set the cache option in your fetch call to 'no-cache' to prevent the browser from caching the response, like so:

  fetch('https://api.adviceslip.com/advice', {cache: "no-cache"})
  

  Alternatively, the Advice Slip API has an option to get a specific advice slip if you provide an id number at the end of the URL. You could append a random number to the URL and it which would bypass the caching on the server side.

  Marked as helpful

  1

  ---

  

  P

  Cassidy•160

  @CMac450Posted over 1 year ago

  @PatrickLee22 Thank you for the explanation! Both are great solutions.

  0

  

  P

  ifaronti•580

  @ifarontiPosted over 1 year ago

  @PatrickLee22

  I tried marking your suggestion as helping but I wasn't able to. your no cache method is golden. Thanks!!

  0

  

  PatrickLee22•170

  @PatrickLee22Posted over 1 year ago

  @ifaronti I appreciate the thought regardless. Glad I could help.

  0
• 

  Aman Singh Bhogal•1,010

  @asbhogalPosted over 1 year ago

  Hi Cassidy,

  Great job! I've looked at your code and made some suggestions below:

  • You should ideally use the useEffect hook to fetch the API data when the component mounts (ie. on first render) and use the setter function in the useState to pass the response object to the variable. Initially this should be set to null and dynamically updated. Then you can call the API using the function name which is inside the hook. Here's a link explaining this in further detail Link
  • You should also implement the .catch() method with the async/await to catch any errors that could be thrown during the API call. Conventionally you would return these to the console.log. Here's a link from the MDN website explaining this in further detail Link
  • Also, to center the button vertically you'll need to take it out of the natural flow by using a declaration like transform: translateY(35px) for example. Another thing - your button shouldn't be wrapped in a div as this makes it difficult for keyboard users and other accessibility-based assistive technologies to be able to access it.

  Hope this help!

  Marked as helpful

  0

  ---

  

  P

  Cassidy•160

  @CMac450Posted over 1 year ago

  @asbhogal Thank you Aman, your explanations and links are much appreciated!

  1

  

  Aman Singh Bhogal•1,010

  @asbhogalPosted over 1 year ago

  @CMac450 no problem - glad to help :)

  0