React-modal: Mobx state not causing re-render in modal

[pmonty]

Summary:

So I have an observable that changes in my mobx store after the modal is opened. Once the observable has changed it is not rendering accordingly in the modal.

Steps to reproduce:

1. Have a mobx action that opens the modal and calls an api
2. Modal will appear without plans loaded
3. Api will retrun plans and they will be pushed to an observable in the store
4. Modal does not re-render

Expected behavior:

Once the plans are returned and pushed to the observable it should re-render the content in the modal and display information of plans.

[diasbruno]

Hi @pmonty, can you please make a small example of this issue?

[pmonty]

Bit hard unfortunately as I can't seem to get the decorators working in sandbox. But basically I have been trying to change state and when that changes the modal should re-render but it isn't.

So i tried using local state inside the modal and that worked. If I updated the state it would re-render the change. But with mobx as state management it isn't working. The modal is definitely an @observer and no errors or warnings so not sure why it is not observing changes.

Edit: working on an example (typescript so I don't get that annoying decorator error) will hopefully have something up soon.

@diasbruno https://codesandbox.io/s/vj0mlq3p4l

[pmonty]

Ok so it definitely isn't observing the state despite being tagged with the @observer decorator. Not sure why this is the case. Not sure if its a mobx issue or react-modal limitation.

[diasbruno]

@pmonty I'll be working on the next version of react-modal. Hope it doesn't take too much time to finish.

If you can, please create a repository, move the example to it and we can share our findings in this issue. It would be great to have mobx support. :+1:

[pmonty]

Ok so it looks like this was a code-cutting issue. Realised i was not using .map so replaced the .forEach and it worked. No issue with mobx or react-modal. Though it was strange.

[diasbruno]

Good to hear you solve this mystery. :)