Working with state in React 0.13

Last night, I worked to update my React application to 0.13 RC2 and Babel (formerly 6to5). My primary goal was to extend the React.Component ES6 class instead of using the factory method createClass. Unfortunately, I kept running into state issues on render.

Uncaught TypeError: Cannot read property ‘channels’ of null

I gated my rendering code on if state was null and was able to see the real issue thanks to React’s debug warning messages.

Warning: getInitialState was defined on ChannelsListView, a plain JavaScript class. This is only supported for classes created using React.createClass. Did you mean to define a state property instead?

The getInitialState method is only used in React’s factory method for creating components. If you’re using the ES6 class you should set state on ‘this’ instead. One place to do that is in the component’s constructor.

‘use strict’;
const React = require(‘react’);
export default class ChannelsListView extends React.Component {
constructor() {
 super();
 this.render = this.render.bind(this);
 this.state = { channels: [] };
}
...

It’s worth noting that I could have avoided all of this troubleshooting by reading the changelog more thoroughly.