I have a dialog based on material-ui written with React and mobx, I'm pretty new to mobx+react and trying to understand the lifecycle here.
The component looks something like this:
@observer
export default class AddDialog extends React.Component {
constructor(store, props) {
super(props);
this.store = store;
}
handleClose = () => {
this.props.store.setOpen(false);
}
handleDateChange = (e, date) => {
this.props.store.setDate(date);
}
handleTitleChange = (e, title) => {
this.props.store.setTitle(title);
}
render() {
const actions = [
<FlatButton
label="Ok"
primary={true}
keyboardFocused={true}
onClick={this.handleClose}
/>,
];
return (
<div>
<Dialog
title="Title"
actions={actions}
modal={false}
open={this.props.store.open}
onRequestClose={this.handleClose}
>
<TextField hintText="title?" onChange={this.handleTitleChange}/>
<DatePicker hintText="Due date" onChange={this.handleDateChange}/>
</Dialog>
</div>
);
}
}
And in App.js I have a code that looks like this:
@observer
class App extends PureComponent {
render() {
return (
<MuiThemeProvider>
<FloatingActionButton onClick={this.handleOpenAddPromissDialog}>
<ContentAdd />
</FloatingActionButton>
<AddPromissDialog store={this.props.addPromissStore} open={false}/>
</MuiThemeProvider>
);
}
}
When I debug the code, it looks like both the store and props args that are passed to the constructor are initialized with the values passed in the render function.
But when the handleClose is called both this.props and this.store are undefined. I can't understand what I'm missing here.
Edit: I tried printing the variables to the console, and there they don't appear as undefined but populated as I would expect. So it looks like and IntelliJ issue.
That's the debug configuration I'm using:
