Why did the variable declared in ComponentWillMount become Undefined?

Question

JavaScript

I have a component of this type, for brevity I removed everything unnecessary.

'use strict';
class LoginFormComponent extends React.Component {

  handleSubmit() {
    console.log(this.model); //undefined
  }

  componentWillMount() {
    this.model = 123;
  }

  render() {
                console.log(this.model);  //123
    var styles = this.props.styles;

    return (
            <CM.MUI.FlatButton
            style={styles.buttonStyle}
            onClick={this.handleSubmit}
            label={CM.gettext('Login')}/>
    );
  }
};

module.exports = LoginFormComponent;

This component displays a button, when clicked, the value of the variable that I declared in ComponentWillMpont should be displayed in the console, but when clicked, undefined is displayed in the console, why?

Answer 1

Because by writing onClick={this.handleSubmit} you take the function out of context, and in this function you have this - not your component
Try writing
onClick={this.handleSubmit.bind(this)}