I have a very simple application where I am trying to update the state of a parent ponent from a child ponent as follows:

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 ( 
            <div>
                <div className="calendar">
                    {this.props.checkIn}
                    <button onClick={ this.handleClick.bind(this) }>Click Me</button>
                </div>
            </div>
        )
    }
}

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 (
            <div>
                <CalendarMain 
                    checkIn = { this.state.checkIn }
                    handleStateClick = { this.handleStateClick.bind(this) }
                />
            </div>
        );
    }
}

The error I am receiving is this.setState is not a function and I can't work out why. Any help would be much appreciated!

I have a very simple application where I am trying to update the state of a parent ponent from a child ponent as follows:

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 ( 
            <div>
                <div className="calendar">
                    {this.props.checkIn}
                    <button onClick={ this.handleClick.bind(this) }>Click Me</button>
                </div>
            </div>
        )
    }
}

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 (
            <div>
                <CalendarMain 
                    checkIn = { this.state.checkIn }
                    handleStateClick = { this.handleStateClick.bind(this) }
                />
            </div>
        );
    }
}

The error I am receiving is this.setState is not a function and I can't work out why. Any help would be much appreciated!

• javascript
• reactjs
• ecmascript-6
• state

• 1 Make sure you're not accidentally mutatingthis.setState elsewhere. ie: this.setState = { foo: 'bar' }; – Yuya Commented Jun 13, 2016 at 17:08
• Just noticing the ../../..... make sure that relative path stays within your project, otherwise moving the project (uploading to remote, posting on github / npm, whatever) could break those paths. – Patrick Roberts Commented Jun 13, 2016 at 17:30
• 1 You may want to reconsider your project hierarchy – Sterling Archer Commented Jun 13, 2016 at 17:38
• 2 The way you're importing React is very... disappointing. – ndugger Commented Jun 13, 2016 at 17:38
• It actually works with the latest version of React: jsfiddle/1uh9e8wx – Łukasz Commented Jun 13, 2016 at 17:39

2 Answers 2

this is not auto-bound in ES6 style syntax.

Either:

1. Bind in constructor like so: this.func = this.func.bind(this)
2. Use arrow function syntax for the function in question like so: func = () => {};

More here: https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding

Use () => lambda to provide lexical scoping and bind correct value of this within the method handleStateClick():

handleStateClick = () => {
  this.setState({
    checkIn: newState
  });
}