React JS: Cannot read property 'setState' of undefined when updating from React.createClass

Question

I'm updating a React component to use:

class SearchFilms extends React.Component

instead of:

var SearchFilms = React.createClass({

When I do run this, I get the following error: "Cannot read property 'setState' of undefined"

Could anyone suggest how I could update this?

class SearchFilms extends React.Component { 
//var SearchFilms = React.createClass({

    getInitial() {
        return {
            userInput: ''
        };
    }

    onChange(event) {
        this.setState({
            userInput: event.target.value
        });
        this.props.newVal(event.target.value);
    }

    render() {
        var languages = ['Shutter Island', 'Inception', 'Titanic', 'Blood Diamond'];

        return (
            <div className="row" id="Nav">
                <input type="text" 
                    value={this.props.userInput}
                    onChange={this.onChange}
                />
            </div>
        )       
    }

}

Possible duplicate of Uncaught TypeError: Cannot read property 'setState' of undefined — Lingaraju E V
– Lingaraju E V, Commented Apr 29, 2017 at 11:42
you are switching from es5 to es6, in es6 you need to bind the function to use this keyword. to solve your issue put this line in the constructor: this.onChange = this.onChange.bind(this) it will work :) — Mayank Shukla
– Mayank Shukla, Commented Apr 29, 2017 at 11:47

Community · Accepted Answer · 2017-05-23 12:34:23Z

7

your this in onChange is undefined, which is caused by not binding.

add these:

constructor(props) {
  super(props);
  this.onChange = this.onChange.bind(this);
}

FYI,

edited May 23, 2017 at 12:34

CommunityBot

11 silver badge

answered Apr 29, 2017 at 11:40

Wildsky

5324 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

stevejcoates Over a year ago

This works great - thank you! I can see where I went wrong now

Collectives™ on Stack Overflow

React JS: Cannot read property 'setState' of undefined when updating from React.createClass

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related