Why doesn't my (mobx) extendObservable call start re-rendering?

Question

Here is the code - pretty sure it's something like extendObservable, which I just don't understand, but looked at it for quite some time. When addSimpleProperty is started, it seems that it is updating the object, but does not cause rendering.

const {observable, action, extendObservable} = mobx; const {observer} = mobxReact; const {Component} = React; class TestStore { @observable mySimpleObject = {}; @action addSimpleProperty = (value) => { extendObservable(this.mySimpleObject, {newProp: value}); } } @observer class MyView extends Component { constructor(props) { super(props); this.handleAddSimpleProperty = this.handleAddSimpleProperty.bind(this); } handleAddSimpleProperty(e) { this.props.myStore.addSimpleProperty("newpropertyvalue"); } render() { var simpleObjectString =JSON.stringify(this.props.myStore.mySimpleObject); return (<div> <h3> Simple Object</h3> {simpleObjectString} <br/> <button onClick={this.handleAddSimpleProperty}>Add Simple Property</button> </div>); } } const store = new TestStore(); ReactDOM.render(<MyView myStore={store} />, document.getElementById('mount')); store.mySimpleObject = {prop1: "property1", prop2: "property2"}; 

Answer 1

This problem is described in the General Problems and Recommendations section of the documentation:

Observed MobX objects do not detect or do not respond to property assignments that were not previously declared observable. Thus, MobX monitored objects act as entries with predefined keys. You can use extendObservable(target, props) to introduce new observable properties to the object. However, iterators of objects like for .. in or Object.keys() will not respond automatically. If you need an object with a dynamic key, for example, to store users by identifier, create an observable _map_s using observable.map .

Therefore, instead of using extendObservable on the observed object, you can simply add a new key to the observed map.

Example

 const {observable, action} = mobx; const {observer} = mobxReact; const {Component} = React; class TestStore { mySimpleObject = observable.map({}); @action addSimpleProperty = (value) => { this.mySimpleObject.set(value, {newProp: value}); } } @observer class MyView extends Component { constructor(props) { super(props); this.handleAddSimpleProperty = this.handleAddSimpleProperty.bind(this); } handleAddSimpleProperty(e) { this.props.myStore.addSimpleProperty("newpropertyvalue"); } render() { var simpleObjectString = this.props.myStore.mySimpleObject.values(); return ( <div> <h3> Simple Object</h3> {simpleObjectString.map(e => e.newProp)} <br/> <button onClick={this.handleAddSimpleProperty}>Add Simple Property</button> </div> ); } } const store = new TestStore(); ReactDOM.render(<MyView myStore={store} />, document.getElementById('mount'));