Submitted 3 days ago

React Practice Toggle (useState) and Fake Data Fetch (useEffect)

tOnski86•240

@tOnski86

Preview site View code

This is a solution for...FAQ accordion

HTML
CSS
JS

1newbie

Design comparison

SolutionDesign

Solution retrospective

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

Aside from the frontend design, I was able to practice frontend logic. I used React useEffect for a 'fake' data fetch for the FAQ items, and useState to manage the functionality of each FAQ item.

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

The logic to open and close the FAQ item while checking if it is open to toggle.

I was able to do it without multiple states, just checking the ID of the current open FAQ item with the id's of the items allowed me to open/close each item with respect to the others, basically opening only one FAQ item at a time.

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

Need to work on implementing animations for React state changes.

Community feedback

Dylan Heslop•1,170
@dylan-dot-cPosted 3 days ago
Well done! Design looks good!

One issue with this is that the website isn't accessible, a keyboard/screen reader user can't toggle the dropdowns, I suggest you make the buttons actual buttons. You might also have to use some aria-* attributes to empower the a11y(accessibility) of your website. I'm not an expert and I myself need to do some research in that area.

Also its good that you were able to use useEffect and create your own custom hook to fetch data, but you don't have to fetch the data from the json file, as you already have it and could easily export it as a data.js file and use the object there.

I realized that on initial load there is a modal open, you could set the openModal state to an undefined value so all will be closed what you load the webpage. Anyways, well done, all the best.
Marked as helpful
0
tOnski86•240
@tOnski86Posted 3 days ago
@dylan-dot-c Hey really appreciate this comment. Indeed it's a bit funny to simulate fetching when the file is locally available :) just wanted to get into the habit of "fetching" since eventually I will have to do it most of the time. I obviously need error-handling here and figure out a better way to simulate fetching data for future projects.

I admit I also need to work on accessibility since I skipped this part. Thanks for the feedback.

For the initial load, I simply set the default state to id=1 to match the design - also I tried looking up and there seems to be no consensus from a UX standpoint if an item should be open, allow for multiple opens, or leave everything closed. So not sure what the best practice is here.

Appreciate you looking into my project and providing valuable feedback!
0
Dylan Heslop•1,170
@dylan-dot-cPosted 3 days ago
@tOnski86 I see what you mean about keeping it open or closed. I guess it all comes down to a matter of the user and what they prefer. Maybe they want multiple to be open at a time so they can maybe screenshot or compare answers, or due to restrictive space(small screens) they would like if it would stay closed on initial load.

In terms of data fetching, axios is a good library to use, there is also swr from vercel and tanstack-query.
1

Please log in to post a comment

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