Multi-step form: React | TypeScript | SCSS

Community feedback

• 

  Mukwende•1,370

  @mukwende2000Posted over 1 year ago

  Hello, this is my honest feedback, first react router was not needed for this project as the different part of the form are not routes, by splitting the form part into routes, you have just made each part a different no wonder you have form on every route. This is one form and when submitted should submit all the data as one group of data from one form, but as it is, the way you have structured this mean each part is its own form.

  Marked as helpful

  4

  ---

  

  Maciej Narejko•180

  @MaciejNarejkoPosted over 1 year ago

  Hi Mukwende,

  Thank you very much for the feedback🙂 I completely agree that React Router was not necessary for this project, and there may be other approaches that could be considered better. However, I wanted to utilize React Router in the project, and I believe that its usage here did not have a negative impact. It can't be said that it divided one form into separate forms since the information from each page updates a single global state stored in the FormContext. In the final step, this state can be handled and passed further to the backend/DB. Unless you meant surrounding the routing with the <form onsubmit> tag, which would semantically improve the code's appearance. I'm open to such a correction to better align the code with semantic standards.

  If I misunderstood your point or if there's something else you meant, I would greatly appreciate further clarification.

  Thank you! 🙂

  0
• 

  Aryan Kumar•390

  @aryanda1Posted over 1 year ago

  I noticed two problems while testing your website.

  1. when i enter some valid in name and email, and a invalid number, and click on next step, the website refresh and erases all inputs.
  2. if i selected some addon, and after changing plan, the addon gets removed.

  1

  ---

  

  Maciej Narejko•180

  @MaciejNarejkoPosted over 1 year ago

  Hi, @aryanda1 👋

  1. That's a valid point. I missed adding the event.preventDefault() while fixing the form tag, which caused the automatic refresh. I have fixed it now. If you have a moment, could you take a look to verify that it no longer happens? It should be resolved now.
  2. That's a feature! The challenge requirements didn't specify the behavior in such a situation, so I made a business assumption that if a customer changes their plan, they would most likely want to change their addons as well. Therefore, when the plan is changed, the customer is allowed to select addons again. At any time, it can be customized.

  I appreciate your participation in testing the solution and pointing out the issue. Issue fixed. If you come across anything else, please let me know.

  Thank you once again! 🙂

  0

  

  Aryan Kumar•390

  @aryanda1Posted over 1 year ago

  Everything looks fine. With those animations it looks more fluid. @MaciejNarejko

  1
• 

  Mukwende•1,370

  @mukwende2000Posted over 1 year ago

  Having something like this

  <form>
  some inputs
  </form>
  
  <form>
  some other inputs
  </form>
  

  Makes this two forms regardless of any state, and each form has it own onSubmit event, forms have everything to do with html and nothing to do with react, so you should never compromise html structure because of any framework. As for routing, it is for navigating between pages and not for dividing forms. That was what i meant. Happy Coding.... Have an amazing day.

  0

  ---

  

  Maciej Narejko•180

  @MaciejNarejkoPosted over 1 year ago

  I am truly grateful for you highlighting the problem with the form tag. I have fixed it and moved the form tag higher in the hierarchy above the routing, so now the form is a top-level tag. Dividing the form into pages may not be the best use of routing, but I wanted to practice it, and if there is an opportunity to use it for navigating between pages in the future, I will definitely make use of it there.

  Thank you for your time as well, happy coding, and I hope I can repay your help with a suggestion someday 🙂

  1