How to enable `this` when converting React module to ES6 class

Question

I have a React module that works fine in ES5 . I convert it to ES6 and using 6to5 to convert. Everything is fine ported, but I get a runtime error when I try to install my props . When I drop the debugger and watch this , I see that this is an EventEmitter , not a class. Here is my code:

 var React = require('react'); import CalendarStore from './../stores/calendar.store.js'; function getAppointments() { return {appts: CalendarStore.getAppts()} } export default class extends React.Component{ constructor(props) { super(props); this.props = { view: 'weeks' } } changeView(child, view) { this.setProps({view: view}); } componentWillMount() { CalendarStore.addChangeListener(this._onChange); } _onChange() { this.setProps(getAppointments()); } .... }; 

I am having a problem with my changeView function. When it is transpiled down, it looks like this:

  _onChange: { value: function _onChange() { this.setProps(getAppointments()); }, writable: true, configurable: true } 

Again, inside this this function is my EventEmitter . What is the way to fix this?

Answer 1

this.setProps deprecated, use state for this. This will give you a warning in 0.13:

Warning: setProps (...) is deprecated in simple React JavaScript classes.

Also, the methods of the es6 class are not standalone, so you need to bind them manually. You can use .bind(this) or use the arrow functions. However, for external emitters you need to save the link.

You can just get rid of _onChange:

 this._calendarListener = e => this.setState({things: e}); CalendarStore.addChangeListener(this._calendarListener); 

Or binding in the constructor:

 constructor(props){ ... this._onClick = this._onClick.bind(this); } 

Remember to cancel the event in the WillUnmount component:

 componentWillUnmount(){ CalendarStore.removeChangeListener(this._onClick); // or CalendarStore.removeChangeListener(this._calendarListener); } 

Adding event listeners should be done in the DidMount component, and not in the WillMount component. The constructor replaces componentWillMount in es6 classes.

This code is very bad ... you are redefining props:

 this.props = { view: 'weeks' } 

Just replace all occurrences of "props" with "state" in your code, and everything will be fine. Also you probably want the initial state of the store.

 this.state = { view: 'weeks', things: CalendarStore.getAppts() } 

---

Also, createClass will not go away anytime soon, so feel free to continue using it. This is often easier. Stores are usually handled by mixins, which is trivial with createClass, but harder to do it right in es6 classes. I have a small library for mixins with react and es6 classes .