Apr 28, 2017

Two-way Data Binding in ReactJS – Part III

Variable-length Arrays

In Part I, we learned how to automatically bind top-level state properties to form elements in JSX, so that updates to those elements automatically updated state and vice versa.

In Part II, we solved for nested objects and properties within our state object by incorporating lodash into our data binding library.

Now, in Part III, we’ll look at a somewhat harder two-way data binding problem: variable-length arrays.

You’ve probably already guessed that the guest1 and guest2 state properties from Part II are less than ideal; if possible, we’d like an array to which we can add guests, and which can also be empty. Something like this:

In theory, we could then add guests to the array with a method like this one:

… and render the array with a function like this one:

So what’s wrong here? Sure, guests[0].name will return the first guest from our state’s guests array the first time, but our model() function will replace the entire array with a single-element array containing only the updated value.

In other words, imagine we are in a browser’s Javascript console when the debugger is stopped on a breakpoint, and watch what happens:

As you can see, the entirety of myArray was replaced with a new array containing only a single element! Although not immediately obvious from renderGuests()‘ JSX, this result makes sense when we observe it in action.

To get around this, we need a modified version of the model() method that can retrieve the array from the state object (even if it is nested several layers deep), modify the nested property value at the specified array index, and place the entire array back into the state object. So the method signature has to look like this:

Then, instead of model(‘guests[0].name’), we would call arrayItem(‘guests’, 0, ‘name’).

Now that you’ve seen the new method’s signature, you probably won’t have trouble inferring its implementation. Again, using lodash:

Now, you modify the input tag in your renderGuests() method to call the new array binder:

Add arrayItem() to bindModel.js:

… and get a reference to it in your component’s render() method:

This completes our full-featured two-way data binding library for ReactJS. To see the full source for this example, go to https://github.com/abraham-serafino/react-data-binding/tree/Part-III. Feel free to leave questions in the comment section below.

About the Author

Object Partners profile.
Leave a Reply

Your email address will not be published. Required fields are marked *

Related Blog Posts
Android Development for iOS Developers
Android development has greatly improved since the early days. Maybe you tried it out when Android development was done in Eclipse, emulators were slow and buggy, and Java was the required language. Things have changed […]
Add a custom object to your Liquibase diff
Adding a custom object to your liquibase diff is a pretty simple two step process. Create an implementation of DatabaseObject Create an implementation of SnapshotGenerator In my case I wanted to add tracking of Stored […]
Keeping Secrets Out of Terraform State
There are many instances where you will want to create resources via Terraform with secrets that you just don’t want anyone to see. These could be IAM credentials, certificates, RDS DB credentials, etc. One problem […]
Validating Terraform Plans using Open Policy Agent
When developing infrastructure as code using terraform, it can be difficult to test and validate changes without executing the code against a real environment. The feedback loop between writing a line of code and understanding […]