title: this is null in React class function
body: <p>I refactored a React class of mine from ES5 to ES6 and now when I click a button, which calls <code>this.state.dispatch(logIn(this.state.logIn))</code>, the initial <code>this</code> at the beginning of the line is null. Super weird.</p>
  
  <p>Here's my class:</p>
  
  <pre><code>class Home extends Component {
      constructor(props) {
          super(props);
  
          this.state = {
              panelIsOpen: false,
              registration: {},
              login: {},
          };
      }
  
      signUp() {
          this.props.dispatch(signUp(this.state.registration));
  
          this.setState({
              registration: {},
          });
      }
  
      logIn() {
          debugger; // this is `null here`
          this.props.dispatch(logIn(this.state.login));
  
          this.setState({
              login: {},
          });
      }
  
      togglePanel(e) {
          this.setState({ panelIsOpen: !this.state.panelIsOpen} );
      }
  
      render() {
          const {elements} = this.props;
          const {registration, login} = this.state;
  
          return (
              // some stuff 
          );
      }
  };
  
  Home.propTypes = {
      elements: React.PropTypes.array,
      dispatch: React.PropTypes.func,
      user: React.PropTypes.object,
  };
  
  const mapStateToProps = ({elements, auth}) =&gt; {
      return {
          elements: getElementsByKeyName(elements, 'visibleElements'),
          user: getLoggedInUser(auth),
      };
  };
  
  Home = DragDropContext(HTML5Backend)(Home);
  export default connect(mapStateToProps)(Home);
  </code></pre>
  
  <p>Clicking the log in button calls the login function but for some reason here, <code>this</code> is <code>null</code></p>
  
  <p>Thanks for taking a look</p>