[Solved]-Why is my call to (mobx) extendObservable not triggering a re-render?-Reactjs

this problem is brought up in the common pitfalls & best practices section of the documentation:

mobx observable objects do not detect or react to property assignments that weren't declared observable before. so mobx observable objects act as records with predefined keys. you can use extendobservable(target, props) to introduce new observable properties to an object. however object iterators like for .. in or object.keys() won't react to this automatically. if you need a dynamically keyed object, for example to store users by id, create observable _map_s using observable.map.

so instead of using extendobservable on an observable object, you could just add a new key to an observable 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'));