Multi-step-form with React
Solution retrospective
Such a nice project! My first time using react-router. Also, first time using Context api for managing state. It was very challenging, and a great learning experience. Any tips on how it could've been done better, faster, or smarter are welcomed. Cheers!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @hqz3
Hello, looking at your code I noticed the input element for the phone number is a "number", which provides stepper arrows for users to increase and decrease the value. However, this input type is used for integers. While it may sound logical that a type="number" should be applicable to a phone number, I learned from trial and error that the correct type is <input type="tel">. Using that, you can then figure out how to validate the phone number (i.e. format, area code, length).
Also, in step 2, there is a buggy behavior where the "Next Step" button turns red after a plan has been selected. I noticed that when I choose a plan, then toggle the subscription term between "Monthly" and "Yearly" the "Next Step" button turns red and I cannot proceed. It's possible the state is being reset incorrectly, which disables the "Next Step" button.
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