React.js Uncaught Error: Invariant Violation updating list

Question

Have a page that contains a number of images, essentially an image gallery. The gallery page maybe updated to include new or remove existing image entries. An entry for an image is created using the following function, the first time the function is called, it completes successfully, subsequent calls, to handle an updated model, fail with the exception

'Uncaught Error: Invariant Violation'.

Whats causing this?

render: function () {
  var imageEntries = this.props.map(function (entry) {
    var divStyle = {
      backgroundImage: 'url(' + entry.preview + ')',
    };
    return React.DOM.div({key: entry.key, className: 'image-stream-entry'},
      React.DOM.div({className: 'image', style: divStyle}),
        imageMetadata(entry)
      );
   });

  return (
   React.DOM.div(null, imageEntries)
 );
}

Answer 1

It means that the actual DOM is in a different state than the virtual DOM and React is unable to reconcile the two in order to render. Typically this is caused by something ELSE changing the HTML that React is expecting, either a JavaScript error or a different library making changes.

As pyrho pointed out, your call to this.props.map seems to be an issue. this.props should return an object, and Object doesn't have a map method. The Invariate error could be thrown because the component failed to mount into the DOM due to this syntax error.

I wrote up a codepen with a modified version of your code (and some additional supporting code to make the demo work). You can check it out here: http://codepen.io/jhubert/pen/PwqZyr

The core of the code is as follows:

var renderEntry = function (entry) {
  var divStyle = {
    backgroundImage: 'url(' + entry.preview + ')'
  };

  return D.div({ key: entry.key, className: 'image-stream-entry'},
            D.div({className: 'image', style: divStyle}),
            imageMetadata(entry)
         );
};

Gallery = React.createClass({
  displayName: 'Gallery',
  propTypes: {
    entries: React.PropTypes.array.isRequired
  },
  getDefaultProps: function () {
    return { entries: [] };
  },
  render: function () {
    return D.div({ className: 'gallery' }, this.props.entries.map(renderEntry));
  }  
});