React.js: setState overwriting, not merging

Question

I'm quite new to React.JS and I am in the process of experimenting by building a masonry-style layout.

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.

The initial model looks like this:

[   {     "title": "The Forrest",     "description": "some cool text",     "imgSmallSrc": "/img/img4-small.jpg",     "imgAlt": "Placeholder image",     "tags": [         "Design",         "Mobile",         "Responsive"     ],     "date": 1367154709885,     "podStyle": {       "width": 253     }   } ] 

(I've only shown one item to keep things short).

Once I complete the loop and have my x and y data I want to apply this to the podStyle object. I call setState() with the following data:

[   {     "podStyle": {       "x": 0,       "y": 0,       "height": 146,       "width": 253     }   } ] 

This seems to remove all current data from the model and leave me with just the podStyle data. Am I misunderstanding how this merge works?

Thanks in advance for any help!

Answer 1

If your state is an object:

getInitialState: function() {   return { x: 0, y: 0 }; } 

you can use setState to set individual keys on that object:

this.setState({ x: 1 }); // y still == 0 

React does no intelligent merging of your state; for example, this does not work:

getInitialState: function() {   return {     point: { x: 0, y: 0 },     radius: 10   }; }  this.setState({point: {x: 1}}); // state is now == {point: {x: 1}, radius: 10} (point.y is gone) 

[Edit]

As mentioned by @ssorallen, you can use the immutability helpers to get the effect you're after:

var newState = React.addons.update(this.state, {   point: { x: {$set: 10} } }); this.setState(newState); 

See this JSFiddle for an example: http://jsfiddle.net/BinaryMuse/HW6w5/