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.

Related Blog Posts
A security model for developers
Software security is more important than ever, but developing secure applications is more confusing than ever. TLS, mTLS, RBAC, SAML, OAUTH, OWASP, GDPR, SASL, RSA, JWT, cookie, attack vector, DDoS, firewall, VPN, security groups, exploit, […]
Building Better Data Visualization Experiences: Part 1 of 2
Through direct experience with data scientists, business analysts, lab technicians, as well as other UX professionals, I have found that we need a better understanding of the people who will be using our data visualization products in order to build them. Creating a product utilizing data with the goal of providing insight is fundamentally different from a typical user-centric web experience, although traditional UX process methods can help.
Kafka Schema Evolution With Java Spring Boot and Protobuf
In this blog I will be demonstrating Kafka schema evolution with Java, Spring Boot and Protobuf.  This app is for tutorial purposes, so there will be instances where a refactor could happen. I tried to […]
Redis Bitmaps: Storing state in small places
Redis is a popular open source in-memory data store that supports all kinds of abstract data structures. In this post and in an accompanying example Java project, I am going to explore two great use […]