Deep cloning and modifying containers from ReactJS this.state

Question

I am presently working on refactoring ReactJS code away from directly manipulating this.state and towards using this.setState() only (which I should have been doing from the beginning).

The contents of this.state in my application include containers with varying numbers of objects. They are entirely JSON-serializable, but I realized I found myself doing something a lot that I don't recall seeing in the ReactJS documentation (hence the request for a code review). I'm interested in knowing, besides general code quality, how close it is to ReactJS idiomatic usage and how it might be moved closer.

The clone() method I have now is intended to provide a deep clone of JSON-serializable objects, without guarantees as to objects that can't be serialized:

var clone = function(original) {
    if (typeof original === 'undefined' ||
      original === null ||
      typeof original === 'boolean' ||
      typeof original === 'number' ||
      typeof original === 'string') {
      return original;
    }
    if (Object.prototype.toString.call(original) === '[object Array]') {
      var result = [];
      for(var index = 0; index < original.length; index += 1) {
        result[index] = clone(original[index]);
      }
    } else {
      for(var current in original) {
        var result = {};
        if (original.hasOwnProperty(current)) {
          result[current] = original[current];
        }
      }
    }
    if (typeof original.prototype !== undefined) {
      result.prototype = original.prototype;
    }
    return result;
}

What I find myself doing repeatedly is of the form (here using classical form Hijaxing to add a new entry):

handle_submit: function(event) {
      event.preventDefault();
      var entry_being_added = clone(this.state.entry_being_added);
      entry_being_added.month = parseInt(jQuery('#month').val());
      entry_being_added.date = parseInt(jQuery('#date').val());
      entry_being_added.year = parseInt(jQuery('#year').val());
      if (jQuery('#all_day').is(':checked')) {
        entry_being_added.all_day = true;
      } else {
        entry_being_added.all_day = false;
      }
      // Additional assignments omitted for the sake of brevity.
      var entries = clone(this.state.entries);
      entries.push(entry_being_added);
      this.setState({'entries': entries});

I'm not sure I've seen this approach in the ReactJS documentation, and I wanted to ask for a sanity check at least. Is it idiomatic to clone container types, modify the clone, and call this.setState() on the modified clone? Am I deviating from idiom in another way, perhaps by having container types in this.state? Or is this spot on?

Answer 1

• React is all about avoiding side-effects as well as rendering the same state exactly the same every time. You'd want to avoid operations that mutate the existing data structure like push or object assignment.

• I'm pretty sure your clone is to prevent your object from being mutated. Instead of clone, create a function that returns your object structure. Just pass in anything that's configurable.

• Instead of mutating the entries array with push, create a new array with your new data added using concat.

• Use refs to fetch values from inputs instead of jQuery.

Your code could have been summarized into something like this:

function createNewEntry(month, date, year, allDay){
  return {
    month: month,
    date: date,
    year: year,
    allDay: allDay
  };
}

handleSubmit: function(event){
  var month = React.findDOMNode(this.refs.month).value;
  var date = React.findDOMNode(this.refs.date).value;
  var year = React.findDOMNode(this.refs.year).value;
  var allDay = React.findDOMNode(this.refs.allDay).value;
  var newEntry = createNewEntry(month, date, year, allDay);
  var entries = this.state.entries.concat(newEntry);

  this.setState({'entries': entries});
}

If you happen to have interest in persistent data structures (immutable data), then have a look at immutable.js. It's recommended in cases where you don't want to unwantedly mutate data.