title: Why ReactCSSTransitionGroup generates multiple components though I expect only one?
body: <p>I am using ReactCSSTransitionGroup to do some animation and I found an interesting thing which does not make any sense to me.</p>
  
  <p>In the example below, when I click <code>&lt;div className="HeartControl"&gt;</code>, it will update the <code>height</code> of the <code>&lt;div className="HeartFill"&gt;</code> which works fine. (I know to achieve the effect does not necessarily need ReactCSSTransitionGroup here though).</p>
  
  <p>Interesting thing is that when I click, there will be another <code>&lt;div key={this.state.heartHeight} className="HeartFill" style={styleHeartFill}&gt;&lt;/div&gt;</code> with a new React component id added after the existing one. </p>
  
  <p>But I expect there will always be only ONE <code>&lt;div className="HeartFill"&gt;</code> there. </p>
  
  <p>Why this happened???</p>
  
  <p>P.S.. after a few clicks, the result will look like:</p>
  
  <pre><code>  &lt;span data-reactid=".0.4.$8de89f4f1403aee7a963122b06de3712.3.0.0.2"&gt;
  &lt;div class="HeartFill HeartFill-enter HeartFill-enter-active" style="position:absolute;bottom:0;left:0;width:30px;height:3.5999999999999996px;background-color:#D64541;" data-reactid=".0.4.$8de89f4f1403aee7a963122b06de3712.3.0.0.2.$=1$6:0"&gt;&lt;/div&gt;
  &lt;div class="HeartFill HeartFill-enter HeartFill-enter-active" style="position:absolute;bottom:0;left:0;width:30px;height:3px;background-color:#D64541;" data-reactid=".0.4.$8de89f4f1403aee7a963122b06de3712.3.0.0.2.$=1$5:0"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>
      
      
     
       </p>
  
  <pre><code>    var HEIGHT_HEART = 30;
     var NUM_HEART_MAX = 50;
  
     var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
  
  
    var Heart = React.createClass({
  
  getInitialState: function() {
      return {
          heartHeight: 0
      };
  },
  
  onClick: function(e) {
      var currentHeartHeight = this.state.heartHeight;
      this.setState({
          heartHeight: currentHeartHeight + 1
      });
  },
  
  render: function() {
  
      var styleHeartFill = {
          'position': 'absolute',
          'bottom': 0,
          'left': 0,
          'width': 30,
          'height': this.state.heartHeight / NUM_HEART_MAX * HEIGHT_HEART,
          'background-color': '#D64541'
      };
  
  
      return (
          &lt;div className="Heart" &gt;
                  &lt;div className="HeartControl" onClick={this.onClick}&gt;
                      &lt;i className="fa fa-angle-up" /&gt;
                  &lt;/div&gt;
              &lt;img src="heart.png" className="HeartOutline" /&gt;
              &lt;ReactCSSTransitionGroup transitionName="HeartFill"&gt;
                  &lt;div key={this.state.heartHeight} className="HeartFill" style={styleHeartFill}&gt;&lt;/div&gt;
              &lt;/ReactCSSTransitionGroup&gt;
          &lt;/div&gt;
      );
   }
  
       });
      React.renderComponent(&lt;Heart /&gt;, document.getElementById('Heart'));
  </code></pre>
  
  <p>`</p>