React Advice Generator

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.

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!