Search code examples
reactjsecmascript-6ecmascript-5

How can I tell when this.setState exists in ES6?

I have been struggling with trying to migrate my React code from ES5 to ES6. As I have found out by now, this is no longer automatically bound which causes all sorts of hell.

I am trying to figure out by trial and error what objects are being passed around. So far I can find everything and adjust accordingly. However when it comes to this.setState I am having problems because it is not visible in console.log!!!! See screenshot in ES5:

enter image description here

and here is the same kind of code in ES6: enter image description here

Please teach me how to fish i.e. help me figure out how to understand when an object has this.setState or not?

things i have tried

  1. from googling around i understand you might be able to default bind everything by changing the base component. unfortunately this did not work when it came to this.setState. It looks identical to the ES5 version of this in console so I concluded that setState is still not being bound somehow
Solution

  • To oversimplify how this works in JS:

    • If you call a function as an object method (e.g., instance.foo()) then this refers to that object instance.
    • If you call a function by itself (e.g., foo()), then this is either undefined or the global object, depending on whether strict mode is in effect.
    • If you take a reference to an object method then call it, that means you're calling it by itself, even though it was originally an object method. (E.g., var bar = instance.foo; bar();.

    Again, this is an oversimplification; MDN has details.

    As this applies to React, and as explained in the React documentation on "Handling Events":

    You have to be careful about the meaning of this in JSX callbacks. In JavaScript, class methods are not bound by default. If you forget to bind this.handleClick and pass it to onClick, this will be undefined when the function is actually called.

    In your code, you render your RawInput as

     <RawInput value={this.state.value} updateValue={this.updateValue}/>

    You're passing a reference updateValue function in as a simple function, so this will not be bound within updateValue.

    Basically, any time you pass a function as a React prop, unless you've bound it yourself, it's likely an error. The symptom is typically that this is undefined. In your code, it's a little more complicated:

    this.props.updateValue(modifiedValue);

    The RawInput's updateValue property is the unbound function App.updateValue, but because you're invoking it as this.props.updateValue, it's being called as if it were a method of this.props - so this refers to the RawInput's props. That's why your console.log is showing an object with only two properties (start and updateValue): it isn't that setState isn't bound or went away, it's that updateValue wasn't bound, so this isn't what you expect within updateValue.

    To fix the issue, as the React docs explain:

    • Use a fat arrow function: updateValue={(value) => this.updateValue(value)}
    • Use the experimental property initializer syntax: Replace updateValue(modifiedValue) {...} with updateValue = (modifiedValue) => {...}.
    • Not mentioned in the React docs, but an approach I often use: Bind updateValue yourself. For example:
    constructor(props) {
    super(props);
    this.updateValue = this.updateValue.bind(this);
}