I have a simple tab menu, and an overview: Within the overview, I'm reaching for a store, a MobX store, and I'm fetching what tab I'm currently in, then displaying in as a text to see what tab I've selected, problem is that the text update is 'delayed';
Say the current selected tab is 'A', if I click on 'B', the text will still display 'A', however, if I click on 'C', it'll display 'B' (so the tab that was selected before), and it goes on for ever;
I haven't tried much, looked up a bunch of tutorials for MobX but none were relevant, at least not for my case. No compiling error, everything is imported/hooked as it should be (I think).
Here's a little scheme: 
For the code part I'm just gonna paste the relevant code so you don't have to read it all:
Click event occurs here:
<MenuItem title="Dashboard" icon="home" onClick={e => this.handleClick(e)} active={this.state.selected === "Dashboard"}/>
It's handled via:
handleClick(event)
{
let txt = event.target.innerText
if(txt === this.state.selected)
return;
this.setState({
selected: txt
})
UserStore.tab = this.state.selected
}
And so the menu actually can fetch and remain updated store-wise:
import { observer } from 'mobx-react'
export default observer(Menu)
Here's the full UserStore.js class:
import { extendObservable } from 'mobx';
class UserStore {
constructor() {
extendObservable(this, {
loading: true,
isLoggedIn: false,
username: "",
tab: "",
theme: "Dark"
})
}
}
export default new UserStore();
And at last, the selected tab display:
class Main extends React.Component {
render() {
return (
Currently in tab: {UserStore.tab}
)
}
}
import { observer } from 'mobx-react'
export default observer(Main)
I do understand that this issue might seem trivial (or not?) but it's only been two days since I've started so, here I am.
Thanks.
