Can't get this.prop when use ES6 classes in React

[jasonliao]

I'm new to React and I want to rewrite a simple react demo with ES6.

but it seem that I can't get this.props, here is the code.

class Timer extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      elapsed: 0
    }
  }
  // other methods here
  tick () {
    this.setState({
      elapsed: new Date() - this.props.start  // Cannot read property 'start' of undefined
    });
  }
  render () {
    var elapsed = Math.round(this.state.elapsed / 100);
    var seconds = (elapsed / 10).toFixed(1);
    return <p>This example was started {seconds} seconds ago.</p>
  }
}

React.render(<Timer start = {Date.now()} />, document.body);

I use "babel-loader": ^5.3.2 and "react": ^0.13.3 , thanks!

[sebmck]

That's not the entirety of your code. Where's the tick method being called?

[cht8687]

I think you need manually bind instance methods when using ES6.
put this.tick = this.tick.bind(this); in the constructor.
Please let me know if I were wrong.

[jasonliao]

@cht8687

you are right! It worked when I call the tick method by using this.tick.bind(this)

componentDidMount () {
  this.timer = setInterval(this.tick.bind(this), 50);
}

Thank you all! 👻

[cht8687]

@L-movingon

Actually, if you are using ES6, the code block of 'componentDidMonut' method can be put inside the constructor and you don't need 'compoentDidMonut' any more.

[kiki-le-singe]

@cht8687 +1
@L-movingon you can read about autobinding here no-autobinding and autobinding

You can also use the ES6 and ES7 way arrow functions and property initializers

[jasonliao]

@cht8687 @kiki-le-singe Thanks again!

[waldreiter]

@cht8687

Actually, if you are using ES6, the code block of 'componentDidMonut' method can be put inside the constructor and you don't need 'compoentDidMonut' any more.

One difference between the constructor and componentDidMount is that the constructor gets called during server rendering too. In this case @L-movingon's code uses setInterval(). If that interval gets set on the server, possible many times, then the server will become very busy. Therefore my advice is to use componentDidMount().

[ajit77shinde]

constructor(props) {
super(props);

}
Use this