title: React.js: setState overwriting, not merging
body: <p>I'm quite new to React.JS and I am in the process of experimenting by building a masonry-style layout.</p>
  <p>I render each element to the DOM, then I need to loop over each item and apply x and y positions based on the preceding elements.</p>
  <p>The initial model looks like this:</p>
  <pre><code>[
    {
      &quot;title&quot;: &quot;The Forrest&quot;,
      &quot;description&quot;: &quot;some cool text&quot;,
      &quot;imgSmallSrc&quot;: &quot;/img/img4-small.jpg&quot;,
      &quot;imgAlt&quot;: &quot;Placeholder image&quot;,
      &quot;tags&quot;: [
          &quot;Design&quot;,
          &quot;Mobile&quot;,
          &quot;Responsive&quot;
      ],
      &quot;date&quot;: 1367154709885,
      &quot;podStyle&quot;: {
        &quot;width&quot;: 253
      }
    }
  ]
  </code></pre>
  <p>(I've only shown one item to keep things short).</p>
  <p>Once I complete the loop and have my x and y data I want to apply this to the <code>podStyle</code> object. I call <code>setState()</code> with the following data:</p>
  <pre><code>[
    {
      &quot;podStyle&quot;: {
        &quot;x&quot;: 0,
        &quot;y&quot;: 0,
        &quot;height&quot;: 146,
        &quot;width&quot;: 253
      }
    }
  ]
  </code></pre>
  <p>This seems to remove all current data from the model and leave me with just the <code>podStyle</code> data. Am I misunderstanding how this merge works?</p>
  <p>Thanks in advance for any help!</p>