Managing state and forms with React. Part 1

Simple form example

We will start with the really basic example. React component to add new user.

To keep an example simple, it will hold all user data in its state, and is supposed to make direct request to the server on form’s submit to save the user. Like this:

First, we will add markup to create some dummy form:

Here we’re using React’s controlled components, which are always showing values from the state. Thus, to make this form work, we heed to add onChange event handlers to actually modify state on user’s input. Otherwise form will be read-only.

Like this:

Now, our basic form should works, but you can see some repetitive pattern in the code, which doesn’t look too elegant even on such a simple example. We are going to investigate ways of making React forms look much better than this.

Introducing Value Links pattern

Obvious idea would be to hide that value/onChange props binding behind some custom <input/> component wrapper. But how?

Ideally, we would like just to pass the single state value to our <TextInput/> in the way that component could modify it. Which can be done if we wrap our value to an object holding both the value and the function to update it.

Which is, essentially, called “Value Link”. We could create links with a functions like this one, which needs to be written once:

And then, use it like this:

With such a thingy, our custom <TextInput/> component become simple and elegant:

Good thing about Value Link pattern is that your custom input component doesn’t imply anything about how the application state is really managed. It could be React state. Or it could be something else, hidden behind valueLink.set( x ) function. <TextInput /> doesn’t care. All data-binding logic is being encapsulated in the particular value link.

This feature of value links opens up a lot of possibilities, which will be covered in the next article.

Volicon/Verizon Value Link Library

As you can see, it’s fairly easy to make simple value links and input wrappers yourself. But this is probably not the thing you want to do. You might prefer doing npm install instead:

Then, just import links and components which has been already prepared for you, extend LinkedComponent, and start writing the render() right away:

Still, these this.linkAt() calls looks a bit clumsy adding some visual noise. Therefore, we will make our finishing stroke — use this.linkAll() helper provided by the ValueLink library.

this.linkAll() will create links for all state attributes (or for listed attributes if state keys were passed — like this.linkAll( ‘a’, ‘b’ )), and wrap them in the single object. With this change, our render() method finally becomes nice and clean:

Not only this code looks nice, but it also is pretty efficient. Thing is that ValueLink library is way smarter than our naive linkState function from the previous section. All the links to the state members it creates are being transparently cached inside of the component. They will be recreated only in case if their values will actually change.

linkAll() makes sure that all cached links are up to date, and gives you the direct access to the component’s links cache. Also, you can access links from your custom event handling methods with this.links; no need to recreate them there.

So, that’s how we’re handling simple forms. And it was really the beginning. Volicon Value Links provides you with a lot of advanced features such as easy form validation, and links to an elements of the complex component state.

In the next articles, I will show how to validate our form, and how to manage the complex state.