title: Cannot read property 'state' of undefined in ReactJS (Gatsby)
body: <p>I have the following code:</p>
  
  <pre><code>export default class Contact extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          password: '',
          redirect: false,
          username: ''
        };
  
    this.onUsernameChange = this.onUsernameChange.bind(this);
    this.onPasswordChange = this.onPasswordChange.bind(this);
  }
  
  onUsernameChange(event) {
    this.setState({ username: event.target.value });
  }
  
  onPasswordChange(event) {
    this.setState({ password: event.target.value });
  }
  
  handleSubmit(event) { 
    event.preventDefault();
    alert('A name was submitted: ' + this.state.username);
  
    //sessionStorage.setItem('username', this.state.username);
  
  }
  
  render() {
  
    return (
        &lt;div&gt;
          &lt;form className="form-signin" onSubmit={this.handleSubmit}&gt;
            &lt;input type="text" value={this.username} onChange={this.onUsernameChange} /&gt;
            &lt;input type="password" value={this.password} onChange={this.onPasswordChange} /&gt;
            &lt;input type="submit" value="Submit" /&gt;
          &lt;/form&gt;
        &lt;/div&gt;
    );
  }
  }
  </code></pre>
  
  <p>After I submit the username and password: I get the following error:</p>
  
  <pre><code>TypeError: Cannot read property 'state' of undefined
  </code></pre>
  
  <p>On the following line:</p>
  
  <pre><code>alert('A name was submitted: ' + this.state.username);
  </code></pre>
  
  <p>What is the problem? Does the username not save? (I am using gatsby-reactjs)</p>