Submitted 4 months ago

Advice Generation ReactJs

react, vite

kudos2Shef•190

@kudos2Shef

A solution to the Advice generator app challenge

Preview Code

Solution retrospective

What are you most proud of, and what would you do differently next time?

This is my first project using an API with fetch in ReactJS and it's also my first-ever ReactJS challenge. I used fetch to render data, ReactJS functional component for code reusability and useState hook to manage state in this project.

What challenges did you encounter, and how did you overcome them?

The implementation of functional components in React was challenging for me, as I haven't coded in React this way before.

What specific areas of your project would you like help with?

I would appreciate any feedback on my code regarding how I should have approached this challenge in React and what else i can add .

Code

Please log in to post a comment

Community feedback

P
Jakub Strzyżykowski•260
@jstrzyzykowski
Posted 4 months ago
Good job!

One small tip:
- define new local state called "isLoading" as a flag
- switch this flag each time when your request is pending
- when "isLoading" is true, you can display some kind of loader on UI
It will significantly improve user experience 🙂

Keep going!
Marked as helpful
Sophie•430
@ippotheboxer
Posted 4 months ago
Well done, the app looks great, and I like the animation you added with the dice. Your code is lean and well written. One thing you could have done in regards to getting the data with fetch, instead of setting the initial value to something hard coded along with the id, you could use useEffect and call fetchAdvice:
```
const [advice, setAdvice] = useState("")
const [id, setId] = useState()

    useEffect(() => {
        fetchAdvice() 
    }, []) // empty dependency array means this is used on render
```
Whilst leaving everything else the same. This means you don't have a hard coded initial value, and useEffect will be used initially when the app is loaded and on any refresh.
Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord