React Practice Toggle (useState) and Fake Data Fetch (useEffect)
Solution retrospective
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.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @dylan-dot-c
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
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