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 particular value link.

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

Volicon’s 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:

And start writing your render() method right away:

Still, these Link.state looks clumsy, adding some visual noise. Therefore, will will make our finishing stroke — use Link.all helper provided by the ValueLink library.

Link.all( component, key1, key2, … ) will create links for all state attributes listed, and put them to 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.

Link.all makes sure that all cached links are up to date, and gives you the direct access to the component’s links cache.

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.