IntelliJ shows this.props is undefined while console.log suggests otherwise

Question

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:

Answer 1

the problem is caused by the way Babel transpiles this in arrow functions: it is changed to _this in transpiled code, and no name mappings are provided:

You will face the same issue when debugging in Chrome Dev Tools (that use the same API as WebStorm for debugging):

See Value of "this" is incorrect when debugging Babel transpiled React with Chrome Devtools and similar reports