es6 class method unable to access local state?

Question

I'm pretty confident i'm doing this wrong, i'm unable to console.log this.state.greeting however if I reference this.state.greeting inside the return statement it works, i'm confused why it doesn't work within the class method

class Test extends React.Component {

  constructor (props) {
    super(props)
    this.state = {
      greeting: 'test'
    }
  }

  greeting () {
    console.log(this.state.greeting)
  }

  render () {
    return (
      <p onClick={this.greeting}>test</p>
    )
  }

}

export default Test

Related: [How to access the correct `this` inside a callback?](http://stackoverflow.com/q/20279484/218196) — Felix Kling, Jan 19 '17 at 20:51

Kousha · Answer 1 · 2017-01-19T20:39:37.890

1

You need to bind it. Here are two options:

class Test extends React.Component {

  constructor (props) {
    super(props)
    this.state = {
      greeting: 'test'
    }
  }

  greeting () {
    console.log(this.state.greeting)
  }

  render () {
    return (
      <p onClick={this.greeting.bind(this)}>test</p>
    )
  }
}

// OR THIS

class Test extends React.Component {

  constructor (props) {
    super(props)
    this.state = {
      greeting: 'test'
    }
    this.greeting = this.greeting.bind(this);
  }

  greeting () {
    console.log(this.state.greeting)
  }

  render () {
    return (
      <p onClick={this.greeting}>test</p>
    )
  }

}

edited Jan 19 '17 at 20:39

answered Jan 19 '17 at 19:45

Kousha

32,871
51
172
296

your second solution doesnt work, it says `Uncaught TypeError: Cannot read property 'bind' of undefined` – alilland Jan 19 '17 at 19:48
You can remove the `bind` call inside `render` here. Once the property is assigned in the constructor, you don't need to bind it again. – Ross Allen Jan 19 '17 at 19:49
@alilland: that happens if you have a spelling error (i.e. `this.greeting` does not match the `greeting` function name). Here is a JSFiddle: https://jsfiddle.net/jwm6k66c/1887/ – Kousha Jan 19 '17 at 20:39
1

@RossAllen You are right. I copied pasted the first example to modify it and forgot to remove the bind – Kousha Jan 19 '17 at 20:39

score 0 · Accepted Answer · answered Jan 19 '17 at 20:26

There are actually two tricks to this one. You can either use the bind function in your constructor like so:

this.greeting = this.greeting.bind(this);

or if you have babel setup correctly with es6 and presets then you can do it a better way by using anonymous lambdas. Inside your .babelrc file it should look like this:

{
    "presets": [
        "react",
        "es2015",
        "stage-1"
    ]
}

and have the proper dependencies installed then you can use the es6 functions like this:

class Test extends React.Component {

  constructor (props) {
    super(props);

  }

  greeting = () => {
    console.log(this.state.greeting)
  }

  render = () => {
    return (
      <p onClick={this.greeting}>test</p>
    );
  }

}

export default Test

Personally I love the second option. It doesn't bloat up your constructor, and the anonymous lambdas are nicer to type than function every time.

i love the sound of #2! Now I wish js-standard didnt complain about it lol — alilland, Jan 19 '17 at 21:29
The official term for "anonymous lambda" is *arrow function*. — Felix Kling, Jan 19 '17 at 22:09
There is a third option as well if you're working in an environment without `stage-2` presets (which is what you need for the [es class fields](https://github.com/tc39/proposal-class-public-fields) you used up there). You can leave the `greeting` method as it is and change the `render` function to return this: `
this.greeting()}>test
`. — Saad, Jan 19 '17 at 22:23

es6 class method unable to access local state?

2 Answers2