Advanced Two Way Binding for React

React is a great library and can make developing web apps much easier.

However, the first thing that anyone coming from Angular sees is the lack of two way binding by default. It is one of the reason why some developers don’t want to try it.

Even though two way binding is a cool feature, it is not actually needed by most applications. Yet, there are cases when it can be really useful.

Today, I will show you one such real life application which I use almost daily. Without two way binding this app will be a nightmare to develop.

Invoices

Our app is named Invoices. It is an internal application, which as the name should suggest is for creating invoices.

When I initially created the app I had a few requirements. It had to be easy to write and host, and it had to take me very little time to develop.

Before, I either used some proprietary software or I used Excel spreadsheets. This was not only time consuming but had way too many limitations.

Here is my initial stack. I used Angular to write the app and I only had static files. All my files were on S3. All the data was stored in Parse. Parse is also used to manage user access.

My new stack is the same, but instead of Angular I am now using React.

Here is what a screenshot of the invoice editing screen looks like (this is a real invoice with just a few changes on potentially sensitive data)

Invoice Editing

Everything in the white, paper-like, box is editable, with the exception of the buttons. Even the labels, like Total and Subtotal, are editable as well as their values on the right of them.

If you change the quantity or the price per unit all other amounts will be updated, too. When you change the VAT percentage in the parentheses next to the VAT word, the amount of VAT on the right will be automatically calculated.

We issue invoices in both English and Bulgarian, so we need to be flexible and to be able to modify every piece of information.

On this very page, there are 96 places where a change can occur. We absolutely need two way binding. Or there will be so much repeating work.

However, simple two way binding will not work for two reasons.

First, we have a Parse object for our invoice, which is essentially a Backbone model with set and get methods when you access properties.

Second, we have many deep nested keys like invoice.get(‘products’).rows[0].name

React is great for many reasons, and one of them is that there is an elegant solution to this case.

Every input element, which is not a checkbox, has a valueLink property, and checkboxes have the checkedLink property which is basically the same.

Let’s have a look at valueLink. What is it and why is it so special?

<input type="text" valueLink={ some_object } />

valueLink accepts a simple object which has two properties: value and requestChange.

The value property is the initial value of the input element when the page is loaded.

The requestChange method is a function with one argument. It will be called each time the value of the input element changes after user interaction. The supplied argument will be the new updated value.

Simple two way binding

Here is how a valueLink object will look like for a simple two way binding.

var valueLink = {
  value: this.state.key,
  requestChange: function(newValue) {
    this.setState({key: newValue})
  }.bind(this)
}

It’s very simple solution. No magic.

Advanced two way binding

There is only one problem with the solution above. It has a specific default value and it only works for a specific key.

Our next step is to create a method which can generate valueLink objects for all kind of default values and keys. Let’s see how this can be done

var InvoiceEdit = React.createClass({

  linkWithState: function(key) {
    return {
      value: this.state[key],
      requestChange: function(newValue) {
        this.setState({key: newValue})
      }.bind(this)
    }
  },

})

This simple method returns an object very simpler to the one you just saw. However, it can generate a valueLink object for any key, and then this valueLink object can be used to accomplish two way binding.

We will see in a minute how exactly we are going to use it.

There is just one last problem with the solution above. It works only with simple keys inside the React component state.

Let me show you what we really use in our Invoice app. It is almost identical to what you just saw.

var InvoiceEdit = React.createClass({
  getValue: function(key) {
    return key.split(".").reduce(function(previous, current, i) {
      if (i === 0) return this.state.invoice.get(current)
      else return previous[current]
    }.bind(this), "")
  },

  setValue: function(key, value) {
    key.split(".").reduce(function(previous, current, i, keys) {
      if (keys.length === 1) this.state.invoice.set(current, value)
      else if (i === 0) return this.state.invoice.get(current)
      else if (keys.length - 1 === i) previous[current] = value
      else return previous[current]
    }.bind(this), "")

    this.setState({invoice: this.state.invoice})
  },

  linkWithState: function(key) {
    return {
      value: this.getValue(key),
      requestChange: function(value) {
        this.setValue(key, value)
      }.bind(this)
    }
  },

  render: function() {
    return (
      <section>
        <header>
          <input type="text" valueLink={ this.linkWithState("title") } />

          <div>
            <div>
              <input type="text" valueLink={ this.linkWithState("number.label") } />
              <input type="text" valueLink={ this.linkWithState("number.value") }/>
            </div>

            <div>
              <input type="text" valueLink={ this.linkWithState("date.label") } />
              <input type="text" valueLink={ this.linkWithState("date.value") } />
            </div>
          </div>
        </header>
      </section>
    )
  },
})

This is only an excerpt of the code, because it has 96 fields to take care of where as here I am only showing you 5 of them.

linkWithState looks almost like before, but instead of reading and setting values from the component state it uses two helper methods getValue and setValue.

By abstracting those two methods, you will be able to create two way binding between your component and any kind of data. Even if you need asynchronous access.

In this specific case, we are reading and writing data to this.state.invoice which is as I told you is a model from Parse and identical to any Backbone model.

Our implementation of getValue and setValue can work with deep keys in the form of deep.level.key.

Of course after setValue changes, it uses setState to notify the react component about it.

Also above you can see the following

<input type="text" valueLink={ this.linkWithState("date.label") } />

This one line shows you everything you need to know to create two way binding. You just have to let know the field which key from your data it should bind to.

As you can see once we have our three helper function linkWithState, setValue and getValue, then it is easy to use two way binding for as many fields as you like. In our case 96 of them.

Next

You may not always need two way binding, but when you need it React has your back.

Try this solution and you can experiment with what kind of data you can do two way binding.

Did you like this article?

Please share it on
Enter your email and get our NPM Cheat Sheet for NodeJS Developers and the links to our 5 most popular articles which have helped thousands of developers build faster, more reliable and easier to maintain Node applications.
100% privacy. No spam.

Best Practices for Node & Express Web Apps

Express makes it very simple to develop your web app, but it lacks structure. It is easy to begin but when your app grows in complexity and your team in size developing and maintaining your app is no more simple.

This is not how it should be. Node & Express promise to make your life easier.

We have created a video course for you to teach you what we have learned from years of development with Node & Express.

It is all about best practices which make development and maintenance of Express apps simple again.

Join our video course on best practices in ExpressJS

Freelancing is hard. You feel alone. You have to manage everything yourself and some clients make it even harder than it should be.

Never ending projects. Clients constantly calling you for no reason.

Sounds familiar? Join hundreds of freelancers with our free

7-part guide to dealing with difficult clients

We are Stefan Fidanov & Vasil Lyutskanov. We share actionable advice about development with Node, Express, React and other web & mobile technologies.

It is everything that we have learned from years of experience working with customers from all over the world on projects of all sizes.


© 2016 Terlici Ltd · Terms · Privacy