Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive multi-form created with React

P
James 220

@jvb3

Desktop design screenshot for the Multi-step form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
4advanced
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

The three major points I'm most proud of are:

  • getting more confident with react hooks, epecially useContext and custom hooks.

  • becoming more familiar with Tailwind, especially responsive variants.

  • and, in most of the components, implementing the single responsibility rule for improved readibility and reusability.

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

Some challenges I came across were :

  • the input fields would become blank when returning to the "Personal Information" page. The state used to track the user inputs was in the component itself and would not persist upon rerenderings. At first, I thought about using local storage to keep the values, but in the end the problem was solved by simply moving the state into context. The user inputs wouldn't get erased after moving it.

  • even after doing it several times in other projects, I can't seem to remember how to properly update arrays of objects in react via the spread operator. It's just something about the syntax that's hard to remember and I usually end up just looking it up again.

Community feedback

Please log in to post a comment

Log in with GitHub
Discord logo

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