Building a Multi-Step Registration Form with React

Building a multi-step registration form with #ReactJS:

  • From the Store we could save our data in a central location and rerender just the components that listened to changes to that data .
  • I thought a good example of showcasing this ability would be in a multi-step registration where we update a component’s state to show which step the user is on, then show the fields for that step .
  • When the user goes to the next step in the process, we’ll increase the step state by 1.
  • React will see the change to our step state and automatically rerender the component to show exactly what we want the user to.
  • And since on step 2 of the process we’ll have been able to go back to a previous step, we’ll have to create a previousStep too.

A simple React example of showcasing a multi-step registration where using state can determine what’s rendered.

@ReactiveConf: Building a multi-step registration form with #ReactJS:

We’ve really enjoyed working with React here at Viget. We’ve used it on client projects, personal ventures, and most recently on Pointless Corp.

One great feature of React is how it handles the state of our application. Each time the state of a React component updates, React will rerender an updated view. Translation: React is great at showing the user something when something happens — if it needs to.

I thought a good example of showcasing this ability would be in a multi-step registration where we update a component’s state to show which step the user is on, then show the fields for that step accordingly. But before we dive in let’s see what we’ll be building.

I added a little more markup, some CSS, and a progress bar to visualize the current step a little clearer. Other than that, we’ll essentially be building the same thing.

We’ll have a 4-step registration process. The user will:

An easy way to show just the relevant fields for a given step is to have that content organized into discrete components. Then, when the user goes to the next step in the process, we’ll increase the step state by 1. React will see the change to our step state and automatically rerender the component to show exactly what we want the user to. Here’s the basic code:

When the step is 1 (when our component is first loaded) we’ll show the Account fields, at 2 we’ll show Survey questions, then Confirmation at 3, and finally a success message on the 4th step. I’m including these components using the CommonJS pattern; each of these will be a React component.

We are getting the value of these fields by referencing the DOM nodes using refs. To read up on how refs work in React check out this documentation. It’s basically just an easier way of referencing a node.

You’ll notice  doesn’t get passed previousStep since it’s our first step and you can’t go back. Also, instead of passing saveValues or nextStep to , we pass a newly created submitRegistration method, which will handle submitting the users input (fieldValues) and increase the step of our registration process to 4, thus showing .

We would repeat the process of creating  for the , and   components. For the sake of brevity, you can check out the code on Github here, here, and here.

Notice how we are saving user input and having to pass it (fieldValues={fieldValues}) to every component that needs it every time? Imagine we had even further nested components relying on this data, or were showing the data in multiple components that were being shown to the user at the same time, opening up the possibility of one having the most up-to-date data, but not the other? As you can see, our above implementation can quickly become tedious and brittle.

We can get ourselves out of this situation by saving our data in a storage entity that Facebook calls a Flux Store. From this Store we could save our data in a central location and rerender just the components that listened to changes to that data accordingly. If you’re interested in learning a bit more on how this works I recommend checking out this talk by Pete Hunt.

React is awesome at handling what and when to show something to the user. In our example, what we’re showing are related input fields (simple markup), and when those fields are shown is determined by the current step (the state of our Registration component). One way of thinking of this relationship is state determines shape. Depending on the state of our application, we’re able to simply and predictably render something different, whether it’s as small as a single character change or showing a completely different component altogether.

Have any questions about React or feedback on how I did something? Feel free to post a comment.

Building a Multi-Step Registration Form with React