
Responsive Multi-Step Form with React and Context API
Design comparison
Solution retrospective
-
Most Proud Of:
- Successfully implementing Context API for the first time to manage global state effectively.
- Overcoming the challenges of making form inputs mandatory before allowing navigation to the next step.
- Gaining a deeper understanding of Context API and how to manage complex state interactions.
-
What I Would Do Differently:
- Optimise the error-handling logic further for better scalability in larger forms.
- Explore custom hooks for cleaner and more reusable state logic.
- Challenges:
- Ensuring that users could not proceed to the next step without filling out the required personal information fields.
- Managing the global state using Context API for the first time, especially keeping track of form data across multiple steps.
- How I Overcame Them:
- For form validation, I implemented error-checking logic using
useEffect
and tracked errors in the component state. This ensured users were alerted when a field was left empty. - By reading documentation and experimenting, I gained a solid understanding of how to structure and use Context API for handling multi-step form state. This included separating state management for plans, add-ons, and form data into logical contexts.
- For form validation, I implemented error-checking logic using
- Suggestions on how to optimize the state management for large forms with multiple nested contexts.
Community feedback
- @rowleksPosted about 2 months ago
This looks great!
You should let your number field accept country codes such as +234, +1, +233 etc.
Also You could further strengthen your email validation field to only accept emails with top level domains (TLDs) such as .com, .org, .us, etc. so users can't insert strange TLD's such as .ccc
I hope this helps.
Marked as helpful0P@DamilordzPosted about 2 months ago@rowleks Thanks for the feedback, I will look into that and make necessary corrections. Thanks once agin
0
Please log in to post a comment
Log in with GitHubJoin 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