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.
