mobx-react | React and MobX | Frontend Utils library

Alright I solved it. Removed the local hook state & just used the MobX state. Also, had 1 minor issue. I was setting the value as uppercase in the store when the store originally had lowercase values. The uppercase values were only for display in the UI.

Here's the modified code that works:

There is no activityStore.activities property in your store actually, you probably missed that part!

I figured it out for myself, now I am hydrating the StoreProvder in the _app.tsx by passing it from the pageProps.

_app.tsx

Preferred way to use MobX@6 with classes is to use makeAutoObservable or makeObservable:

Probably you need to use Switch from "react-router" package instead of "react-router-transition-switch".

Here is some idea on how you can use this in functional component. (note that I haven't tested the code, but this is for you to give the direction)

1. Create a class for Shop Store, which should be something like this.

Since MobX 6 the @observable decorator is not enough. You need to use makeObservable / makeAutoObservable in the constructor as well.

Inside your App component, you created an object variable store via this code const store = AppStore();. Then you use it, display it, change it and so on. Later on inside your SomeComponent component you create a NEW variable store via const store = AppStore();. Even tho the variable names are the same and using the object, these are 2 DIFFERENT variables. Hence why updating one does not update the other. Inside the DOM they are a different object. To fix it instead of creating a new object inside the SomeComponent just pass store from the parent component. Inside the App, when rendering SomeComponent pass it the store variable like so

You need to initialize your fields right away or if you want to initialize them in the constructor then you need to call makeAutoObservable after all initializations, otherwise it won't pick up undefined fields.