Stateful components are the most appropriate place for your application to handle the interaction logic and manage the state. They make it easier for you to reason out how your application works. This reasoning plays a key role in building maintainable web applications.

React stores the component's state in this.state, and it sets the initial value of this.state to the value returned by the getInitialState() function. However, it's up to us to tell React what the getInitialState() function will return. Let's add this function to our React component:

{
  getInitialState: function () {
    return {
      isHidden: false
    };
  },

  render: function () {
    if (this.state.isHidden) {
      return null;
    }

    return React.createElement('h1', { className: 'header' }, 'React Component');
  }
}

In this example, our getInitialState() function returns an object with a single isHidden property that is set to false. This is the initial state of our...