title: React: Why component's constructor is called only once?
body: <p>In the <a href="http://codepen.io/anon/pen/VYVPBJ">following example</a>, when <code>Item 2</code> is clicked, <code>Second 1</code> is shown instead of <code>Second 2</code>. Why? How would you fix that?</p>
  
  <hr>
  
  <pre><code>var guid = 0;
  
  class Content extends React.Component {
    constructor() {
      guid += 1;
      this.id = guid;
      console.log('ctor', this.id); // called only once with 1
    }
    render() {
      return (
        &lt;div className="content"&gt;
          {this.props.title} - {this.id}
        &lt;/div&gt;
      );
    }
  }
  
  class MyApp extends React.Component {
    constructor() {
      this.items = ['Item 1', 'Item 2'];
      this.state = {
        activeItem: this.items[0]
      };
    }
    onItemClick(item) {
      this.setState({
        activeItem: item
      });
    }
    renderMenu() {
      return (
        &lt;div className="menu"&gt;
          &lt;div onClick={this.onItemClick.bind(this, 'Item 1')}&gt;Item 1&lt;/div&gt;
          &lt;div onClick={this.onItemClick.bind(this, 'Item 2')}&gt;Item 2&lt;/div&gt;
        &lt;/div&gt;
      );
    }
    renderContent() {
      if (this.state.activeItem === 'Item 1') {
        return (
          &lt;Content title="First" /&gt;
        );
      } else {
        return (
          &lt;Content title="Second" /&gt;
        );
      }
    }
    render() {
      return (
        &lt;div&gt;
          {this.renderMenu()}
          {this.renderContent()}
        &lt;/div&gt;
      );
    }
  }
  </code></pre>