A surprisingly complex form
uSwitch is the number one energy supplier switching service in the UK. To complete the switching process our users have to fill out a surprisingly complex form with their personal details, address history, energy meter numbers and bank account details. The form was built several years ago using the then standard stack of Ruby on Rails on the server side rendering HTML with a combination of jQuery, lodash and JST templates on the client side.
Why we chose React
React seemed a good fit for our use case. Firstly, it is a library, not a framework and doesn’t force a rigid structure on the existing code. Secondly, React’s virtual DOM and explicit state approach leads to far simpler view layer code. Thirdly, it is possible to integrate components in an existing form (as we will discuss below).
A React address entry component
We chose to rewrite the most complex and troublesome part of the form, the address entry component. This part of the page allows users to search by postcode for their address (with an address list populated via Ajax), select their address from the list or enter their address manually. This was straightforward to model in React with four React subcomponents for each view of the user interaction.
The interesting part was integrating the component with the rest of the form. This required:
- Adding multiple instances of the address component to the form (as some energy suppliers require up to three years of address history)
- Synchronising validation of the React component with the rest of the form
- Updating the non-React parts of the form based on user interaction with the React component
- Getting the information entered in the React component to the server
Adding multiple instances of the React component to the form
React.renderComponent to render the address component into the div.
The props used to initialise the component (which include an initial list of possible addresses and any previously entered address information) are serialised to JSON on the server and embed into the script tag on the page. This ensures that if the page is submitted and reloads after failing server validation the component is reinitialised with any data the user has previously entered.
React.unmountComponentAtNode to add or remove the React components from the page.
Validation of the React components
When the user submits the form we need to validate that they have entered an address correctly. This validation is handled inside the React component. To instigate this we call a custom validate method on the component instance (
Getting user input from React to the server
To post the data back to the server the React component simply renders inputs elements inside the form on the page. When the user chooses to enter an address manually the inputs are shown in the form. When an address is selected from the address list we serialize the selected address into the form inputs and hide the form. Additionally the inputs are changed to hidden inputs to remove them from the tab order. (A gotcha here is that you can’t change input type in Internet Explorer 8, so we use browser detection to skip this step on that browser) As there can be multiple address components on the page each instance of the component uses a unique prefix for the input name.
Communicating with the rest of the form
No magic - just straightforward integration