title: React- Cannot read property 'setState' of undefined
body: <p>for some reason, I'm getting the error " React- Cannot read property 'setState' of undefined". So this.state is never getting updated with the values that the user inputs. When I tried the binding that is commented out, I get strange behavior where I'm unable to type input for the username and I no longer get the null error, but the values are just undefined. Any help would be appreciated. Thanks.</p>
  
  <pre><code>import __fetch from "isomorphic-fetch";
  import React from "react";
  import InlineCss from "react-inline-css";
  import Transmit from "react-transmit";
  
  import Header from './components/header'
  
  class Registration extends React.Component {
  
      componentWillMount () {
          if (__SERVER__) {
              console.log("Hello server from Registration");
          }
  
          if (__CLIENT__) {
              console.log("Hello Registration screen");
          }
      }
  
      constructor () {
          super()
  
          this.state = {
              name: '',
              password: ''
          }
  
           //this.onChangeName = this.onChangeName.bind(this);
           //this.onChangePassword = this.onChangePassword.bind(this);
      }
  
      onChangeName(e) {
          //this.state.name = e.target.name
          this.setState({ name: e.target.name});
      }
  
      onChangePassword(e) {
          //this.state.password = e.target.name
          this.setState({ password: e.target.password });
      }
  
  
      emptinessChecker(){
          let {name, password} = this.state
          console.log(name)
          if (name === "" || password === "") {
              return true;
          }
          else {
              return false;
          }
      }
  
      submit() {
          console.log(this)
          console.log(this.state)
          if (this.emptinessChecker()){
              alert("Please do not leave any fields blank!");
          }
          else{
              var xhr = new XMLHttpRequest();   // new HttpRequest instance 
              xhr.open("POST", "/edit");
              xhr.addEventListener("load", e =&gt; {
                  console.log(xhr.responseText)
              });
  
              xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
              xhr.send(JSON.stringify(this.state));
              window.location.href= "/success"
          }
      }
  
  
      render () {
  
          //let {username, password} = this.state
  
          if (__SERVER__) {
              console.log("render server from registration");
          }
          if (__CLIENT__) {
              console.log('we client now!')
          }
  
          return (
              &lt;InlineCss stylesheet={Registration.css()} namespace="Registration"&gt;
                  &lt;Header /&gt;
  
  
  
                  &lt;div&gt;
                      &lt;div className = "Register" &gt;
                          Register
                      &lt;/div&gt;
  
  
                      &lt;ul className="account-fields"&gt;
  
                          &lt;div className = 'Name'&gt;
                                  &lt;label&gt;Username&lt;/label&gt;
                                  &lt;input type="text" value={this.state.name} onChange={this.onChangeName} /&gt;
                          &lt;/div&gt;
  
                          &lt;div className = 'Password'&gt;
                                  &lt;label&gt;Password&lt;/label&gt;
                                  &lt;input type="password" value={this.state.password} onChange={this.onChangePassword} /&gt;
                          &lt;/div&gt;
  
  
                          &lt;div className='submitForm'&gt;
                              &lt;div className='submit' onClick={e=&gt;this.submit()}&gt;Submit&lt;/div&gt;
                          &lt;/div&gt;
  
                      &lt;/ul&gt;
                  &lt;/div&gt;
  
              &lt;/InlineCss&gt;
  
  
  
  
          );
      }
      /**
       * &lt;InlineCss&gt; component allows you to write a CSS stylesheet for your component. Target
       * your component with `&amp;` and its children with `&amp; selectors`. Be specific.
       */
      static css () {
          return (`
              &amp; .Register {
                  position: fixed;
                  right: 550px;
                  bottom: 550px;
                  font-size: 50px;
              }
              &amp; .account-fields {
                  position: fixed;
                  right: 550px;
                  bottom: 450px;
                  font-size: 20px;
              }
              &amp; .submitForm {
                  position: fixed;
                  right: 10px;
                  bottom: 10px;
                  width: 200px;
              }
              &amp; .submit {
                  cursor: pointer;
                  text-align: center;
                  font-size: 20px;
                  padding: 10px;
                  background-color: #00E4A5;
                  color: #fff;
                  border-radius: 5px;
                  box-shadow: 0 2px 10px 0 rgba(0,0,0,.13);
                  border-bottom: 2px solid #00C791;
                  text-shadow: 0px -1px 0px #009E73;
              }
          `);
      }
  
  }
  
  export default Transmit.createContainer(Registration);
  </code></pre>