React Design Patterns and Best Practices - Second Edition

State

Another big difference between the createClass factory and the extends React.Component method is the way you define the initial state of the components.

Again, with createClass, we use a function, while with the ES6 classes we set an attribute of the instance.

Let's see an example of that in the following code snippet:

  const Button = React.createClass({     getInitialState() {       return {         text: 'Click me!'      };    },     render() {       return <button>{this.state.text}</button>;    }  });

The getInitialState method expects an object with the default values for each one of the state properties.

However, with classes, we define our initial state using the state attribute of the instance and setting it inside the constructor method of the class:

  class