title: React.js Uncaught Error: Invariant Violation updating list
body: <p>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 </p>
  
  <blockquote>
    <p>'Uncaught Error: <strong>Invariant Violation</strong>'.</p>
  </blockquote>
  
  <p>Whats causing this?   </p>
  
  <pre><code>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)
   );
  }
  </code></pre>