React setState between components ES6
<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>