Mobx + React won't update rendered component

Question

I'm using mobx to open and close a popup modal(with react)

Unfortunately changes in the state are not reflected in the popup modal. What could be the problem?

Edit: I've added a sandbox with a simpler example: https://codesandbox.io/s/7z161kyv86

Answer 1

decorate doesn't work because of how Babel 7 transforms the class properties.

Babel 7

class Foo {
  value = 1;
}

// =>

class Foo {
  constructor() {
    Object.defineProperty(this, "value", {
      configurable: true,
      enumerable: true,
      writable: true,
      value: 1
    });
  }
}

You need to configure the @babel/plugin-proposal-class-properties plugin to use the loose mode for it to transform it in the same way Babel 6 does.

.babelrc

{
  "plugins": [
    [
      require('@babel/plugin-proposal-class-properties').default,
      {
        loose: true
      }
    ]
  ]
}

Babel 6

class Foo {
  value = 1;
}

// =>

class Foo {
  constructor() {
    this.value = 1;
  }
}