title: React setState between components ES6
body: <p>I have a very simple application where I am trying to update the state of a parent component from a child component as follows:</p>
  
  <pre><code>import React from '../../../../../../../dependencies/node_modules/react';
  import ReactDOM from '../../../../../../../dependencies/node_modules/react-dom';
  
  class CalendarMain extends React.Component {
      constructor() {
          super();
      }
  
      handleClick() {
          this.props.handleStateClick("State Changed");
      }
  
      render() {
          return ( 
              &lt;div&gt;
                  &lt;div className="calendar"&gt;
                      {this.props.checkIn}
                      &lt;button onClick={ this.handleClick.bind(this) }&gt;Click Me&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  
  class CalendarApp extends React.Component {
  
      constructor() {
          super();
  
          this.state = { 
              checkIn: "Check-in",
              checkOut: "Check-out",
              dateSelected: false 
          };
      }
  
      handleStateClick( newState ) {
          this.setState({
              checkIn: newState
          });
      }
  
      render() {
  
          return (
              &lt;div&gt;
                  &lt;CalendarMain 
                      checkIn = { this.state.checkIn }
                      handleStateClick = { this.handleStateClick.bind(this) }
                  /&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>The error I am receiving is <code>this.setState is not a function</code> and I can't work out why. Any help would be much appreciated!</p>