ReactJS Mobx items are not updating

Question

I am trying to build a mine sweeper game using MobX, the problem I'm stuck with, is that I don't understand why my cells on the board wont update.

here is a sandbox with my code

https://codesandbox.io/s/epic-sun-n1dnz?file=/src/Components/CellComponent.js

in my "CellComponent" I defined:

            <Button onClick={() => game.unveilCell(cell)}>{revealed? "2" : "?"}</Button>

so I would expect that when I click the cell, it will show the number 2 but only if I wait for like 1 minute it updates, I assume I am using MobX observer wrong

Answer 1

You need to make your makeAutoObservable call to be the last one inside Cell constructor:

export default class Cell {
  value;
  x;
  y;
  revealed;
  flag;

  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.revealed = false;
    this.flag = false;
    this.value = 0;
    // It should be in the end, after all initialisations
    makeAutoObservable(this);
  }

  // ...

By default without additional configuration MobX cannot pickup undefined fields and make them observable.