 <p>According to <a href="http://facebook.github.io/react/docs/component-api.html#setstate" rel="nofollow">React's setState doc</a>:</p> <blockquote> <p>Performs a shallow merge of nextState into current state</p> </blockquote> <p>This means you should provide a valid <code>nextState</code> object as argument to the method. <code>{info.merchandise.label: "New Label"}</code> is not syntactically correct, that's why you get an error.</p> <blockquote> <p>Treat this.state as if it were immutable.</p> </blockquote> <p>This simply means that if you want to change some property inside the state object, you should not mutate it directly, but replace it with a new object containing the modification instead.</p> <p>In your case, the state object contains several nested objects. If you want to modify a "leaf" object's property, you'll also have to provide new objects for every containing object up the tree (because each of them have a property that changes in the process). Using <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign" rel="nofollow">Object.assign()</a> to create new objects, you could write:</p> <pre><code>// new "leaf" object: const newMerchandise = Object.assign({}, this.state.info.merchandise, {label: "New Label"}); // new "parent" object: const newInfo = Object.assign({}, this.state.info, {merchandise: newMerchandise}); // new state ("parent") object: const newState = Object.assign({}, this.state, {info: newInfo}); // eventually: this.setState(newState); </code></pre> <p>By the way, you'll notice that it's easier to handle the state object when its structure tends to be "flat" rather than "deeply nested".</p>