Advice Generator

Community feedback

• 

  Carlos Luna•40

  @CharlyLuna

  Posted about 2 years ago

  Hey, regarding to your code, I would add an useEffect to do the fetch from the API at the beginning so the user can see some text in the page in the first load, I think this can be a good user experience instead of seeing the empty text in the box.

  Also I would recommend if you want to practice a little more, using a custom hook so you can separate the logic from your component. You can have a file named useAdvice or something like that were you put all this logic:

  const [advice, setAdvice] = useState(null); // the advice is an object so you can put here null or a basic structure of how the object is: {advice: '', id: '0'}
  // const [isLoading, setIsLoading] = useState(true) *you can even add this state if you want to show a loader while the fetch is taking place
  
  // useEffect(()=>{},[]) *executing the diceRoll func only if you want to add it
  
  const diceRoll = () => {
  axios.get("https://api.adviceslip.com/advice").then(function (response) {
  // handle success
  setAdvice(response.data.slip);
  });
  };
  
  

  Usually creating custom hooks is a good practice so you can have a cleaner component and you can reuse the logic elsewhere.

  10

  Marked as helpful