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
Google Professional Machine Learning Engineer Exam 2021
Exam Description A Professional Machine Learning Engineer designs, builds, and productionizes ML models to solve business challenges using Google Cloud technologies and knowledge of proven ML models and techniques. The ML Engineer is proficient in all aspects […]
Designing Kubernetes Controllers
There has been some excellent online discussion lately around Kubernetes controllers, highlighted by an excellent Speakerdeck presentation assembled by Tim Hockin. What I’d like to do in this post is explore some of the implications […]
React Server Components
The React Team recently announced new work they are doing on React Server Components, a new way of rendering React components. The goal is to create smaller bundle sizes, speed up render time, and prevent […]
Jolt custom java transform
Jolt is a JSON to JSON transformation library where the transform is defined in JSON. It’s really good at reorganizing the json data and massaging it into the output JSON you need. Sometimes, you just […]