How to change and observe one observable in several components

[artsur]

https://codesandbox.io/s/react-mobx-change-value-in-several-components-f2tuu

How to change a variable from different places?
The variable is one, but it changes separately in different components and these changes made in one component are not reflected in the other.

[artsur]

Is the only way to change value by using store in props like this?
https://codesandbox.io/s/react-mobx-change-value-in-several-components-forked-xy5xy

[kubk]

You can use React context to share Mobx store between components, it's documented here: https://mobx.js.org/react-integration.html#using-external-state-in-observer-components

For some reason, this information is hidden somewhere in docs, it's not easy to find and there is no way to create a link to a specific tab:

[artsur]

https://codesandbox.io/s/react-mobx-change-value-in-several-components-forked-using-react-context-e1mjh
It works exactly as
https://codesandbox.io/s/react-mobx-change-value-in-several-components-f2tuu

Only using props works as required
https://codesandbox.io/s/react-mobx-change-value-in-several-components-forked-xy5xy

[mweststrate]

You're creating an entirely new store every time you render the component: <AppStoreContext.Provider value={AppStore()}>. So either create the AppStore() outside the component, or create it once and store it in useState before passing it to the provider. E.g. const [store] = useState(() => AppStore())

[artsur]

Thank you. I figured out how to do. This example works well now https://codesandbox.io/s/react-mobx-change-value-in-several-components-forked-using-react-context-e1mjh